Left side of fieldset hidden due to overflow hidden

Question

I have a field set where I used overflow: hidden in order for it not to collide with a nother div floating left to it.

The problem is that the over flow hidden block the left side of it. here is a jsfidde. sorry for the long code, no time to screen...

Answer 1

I'm not sure if this is the look you are trying to achieve but you can find my attempt here .

I removed the right margin from div.rightside and the float and overflow properties fron div.leftside.

.rightSide {
    float: right;
    /*margin: 0 100px 0 0;*/
    max-width: 40%;
    overflow: hidden;
    width: 40%;
}
.leftSide {
    /*float: right;
    overflow: hidden;*/
    margin: 0 10px 0 0;
    width: 500px;
}

The visual results may be undesirable depending on the size of screen this page will be rendered to so I would suggest you use the 1140px CSS Grid System

Answer 2

If I get what you tried to do:

rightSide should be with float:right ;

and leftSide should be with float:left ;

just look on your width ... it's should be set to both div

take a look on the example: move the middle line to the left and you see the div go left..

jsfiddle <--- Click on the link