472,958 Members | 1,943 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

CSS Floated <div box and overflow problem

160 100+

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?


[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html lang="en">
<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">

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

float: left;
width: 100px;
height: 100px;
background-color: #F63;
border: 1px solid #F30;

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

<div class="floatleft">

<div class="floatleft">

<div class="floatleft">


Nov 10 '07 #1
4 2587
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
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
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
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

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

Similar topics

by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will...
by: Philip | last post by:
I am trying to make a bunched of left-floated divs that will be contained in a larger div. the floated divs all contain a left-floated img and text of varying sizes. If I don't set a height (or...
by: Jim M | last post by:
I have had great success with using <iframe> with overflow-y set to auto. I can get a similar look with the <iframe> tag. BUT... In all cases I need to have fixed heights. Is there a way to...
by: BBB | last post by:
I have a web form with a <div> section ... I have it setup so the Update/Cancel buttons are fixed at the bottom of the screen while the content of the form is in the <div> and scrolls. Nice to the...
by: Rick Spiewak | last post by:
I'm using a DataList inside a Grid Layout Panel (which ends up being a <DIV>) so that I can use the overflow:scroll property. This is working fine, except for one anomaly: If there aren't enough...
by: alex | last post by:
Hey all, May have missed this in the FAQ, advice or article links welcome. Have a content div with a navigation div floated left and an advertisement div floated right. I would like to have a...
by: Stan R. | last post by:
Greetings. I have a couple of questions concerning CSS layouts, as apposed to the old <tablemethod for creating layouts . Even after spending the last few days searching all over Google Groups, I...
by: prino | last post by:
Hi all, I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

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.