CODEWITHSUNDEEP
htmlcss
CptFishPants
CptFishPants

Reputation: 145

Overlapping DIV (Variable width issue)

I have 2 div columns set to val%, within those columns I then have some smaller static width / height boxes ..

.. and on the other side a variable width / height column.

However as I vary the width of the browser window, these divs overlap.

I have tried various combinations of overflow / float / min and maximum heights etc but I am not getting anywhere.

Can someone point out what I'm missing?

Rough jsfiddle: http://jsfiddle.net/2xdcases/

Actual Page: https://www.ablueman.co.uk/testbench/newindex/

screenshot

.content {
margin: 2px 0px 2px 0px;
border-bottom: 1px solid #BABABA;
padding: 10px 10px 10px 10px;
background-color: #b0c4de;
}

.cont {
float:left;
width:48%;
margin: 1px 0px 1px 0px;
border-bottom: 1px solid #BABABA;
padding: 5px 5px 5px 5px;
/*background-color: #b0c4de;*/
/* min-height: 600px; */
}

.co {
float:left;
width: 200px;
Height: 300px;
margin: 1px 0px 1px 0px;
border: 1px solid #BABABA;
padding: 2px 2px 2px 2px;
overflow:auto;
}

Upvotes: 0

Views: 64

Answers (1)

Gersom
Gersom

Reputation: 671

Give #contentWrapper overflow: hidden;

Because the elements on the left are floated, the parent element will not change its size accordingly

For more information read this: http://css-tricks.com/all-about-floats/ (especially under the heading 'The great collapse')

Upvotes: 2

Related Questions