471,599 Members | 1,302 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,599 software developers and data experts.

CSS Floated <div box and overflow problem

bugboy
160 100+
Hi!

I have multiple floating boxes inside a main box that has a fixed dimension. The floating boxes may vary in number and i want them to stay lined up along the top of the main box with a horizontal scrollbar to see those that are rendered outside the main box.. but since they are floated next to each other they wrap and i get a vertical scroll bar. i want any extras to float out the right side of the box and stay hidden. This example has four inner boxes but it could have as many as 20.

Is there a way to get them to line up at the top of the main box and not wrap to the next line?

Thanks!

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Three elements with "float: left" applied</title>
<style type="text/css" media="screen">


.containingbox
{
margin: 100px 0px 0px 100px;
padding: 0px 0px 0px 0px;
width: 400px;
height: 200px;
border: 1px solid #000;
overflow-x: auto
}

.floatleft
{
float: left;
width: 100px;
height: 100px;
background-color: #F63;
border: 1px solid #F30;
}
</style>
</head>
<body>

<div class="containingbox">
<div class="floatleft">

</div>
<div class="floatleft">

</div>
<div class="floatleft">

</div>
<div class="floatleft">

</div>
</div>

</body>
</html>[/html]
Nov 10 '07 #1
4 2464
drhowarddrfine
7,435 Expert 4TB
The problem with that is that floated elements are to align themselves with the edge of the next element to its left (when floated left) and when it can't fit in the container, it finds the next item running vertically to its left, when would be downward.

I'd bet there's a way to do this but it takes a while for my mind to get going in the morning. Try looking at the W3C spec for floats and see if they give a hint about this.
Nov 11 '07 #2
bugboy
160 100+
Is there an alternative way to get boxes side by side?

In use the inside boxes will vary in number and width so they will need to be placed relative to each other.
Nov 11 '07 #3
bugboy
160 100+
Yay, i found the answer.. Instead of using: [HTML]{float: left;}[/HTML] I can use: [HTML]{display: table-cell;[/html] This treats the block as a table cell <td> allowing them to stack horizontally. Simple! ...if it works the same in all browsers that is....
Nov 11 '07 #4
bugboy
160 100+
my initial experiments seem to show that using display: table-cell; blocks any vertical padding adjustments for the box. Vertical margin adjustments work but apply to all the blocks in the table-cell row. This means that i can't make vertical adjustments to just one of the blocks in the row.

if anyone has figured out how to position just one block in the table-cell row, please let me know, Thanks!
Nov 11 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

61 posts views Thread by Toby Austin | last post: by
7 posts views Thread by BBB | last post: by
1 post views Thread by alex | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.