CODEWITHSUNDEEP
csshtmlcss-float
waxical
waxical

Reputation: 3896

Allowing div to expand or move past container

I have an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.

I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?

Example code:-

<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>

Where all the divs left, center and right are float: left;

Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.

Any help much appreciated!

Upvotes: 1

Views: 4809

Answers (2)

Shikiryu
Shikiryu

Reputation: 10219

The best way to be sure is to set a fixed width to your div here.

An example here

#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}

Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.

Upvotes: 2

kuyabiye
kuyabiye

Reputation: 709

it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.

Upvotes: 1

Related Questions