CSS Floated <div box and overflow problem

160 New Member

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="containi ngbox">
<div class="floatlef t">

</div>
<div class="floatlef t">

</div>
<div class="floatlef t">

</div>
<div class="floatlef t">

</div>
</div>

</body>
</html>[/html]

Nov 10 '07 #1

Subscribe Reply

2620

drhowarddrfine

7,435

Recognized Expert Expert

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

New Member

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

New Member

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

New Member

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

Similar topics

40770

Problems with form elements that are hidden with <div style="display:none">

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 style="display:none"> can be displayed by setting the style attribute to "display:", or hidden with "display:none". This gives the illusion that the person filling out the form is switching from page to page...without the overhead of extra hits on the server,...

Javascript

24510

How to do a <table> with <div> tag

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 'stretch'</td> <td valign="top" width="300">some data that won't 'stetch'</td> </tr> </table>

HTML / CSS

5013

Mozilla <div> can't see nested floated <div>?

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 height:auto) the larger div doesn't seem to see the nested divs, and they spill out the bottom. IE seems to automatically resize the larger div as long as I set the height to 100% or any pixel size. Mozilla doesn't recognize the percent, and...

HTML / CSS

919

Variable length scrolling <div> or <iframe>?

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 put either tag inside an HTML <TD> and have the same kind of scrolling effect. This would allow me to fill the screen and have the size of the scrolling box change on resize. Thanks in advance.

.NET Framework

15973

Print entire <div> area

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 end user ... but when they go to print ... of course they only get a portion of the entire web site. I've searched and found references to CSS type solutions but have been unable to get them to work. <div id="main" style="overflow:auto;">...

Javascript

2631

DataList inside a Grid Layout Panel (<DIV>) item layout problem

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 items to cause an overflow, and scrolling, they get spaced evenly inside the <DIV>. So, one item appears in the middle of the area, two spread out with space on top, between, and bottom, etc. Finally, after adding enough to fill the area, the...

ASP.NET

1357

Floated div with border problem

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 border going around the content, the two divs and right down to the bottom. So far, all I've got is this:

HTML / CSS

1797

Question about CSS layouts (with a sidebar) and <div> heights...

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 haven't not been able to find a solution to my collective dilemma, and I hope some of you fine folks here in these neck of the UseNet woods might be able to share some wisdom with a fellow coder. My questions are in regard to what are the proper...

HTML / CSS

10049

Dynamically adding function to <DIV > element

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 editor. A fellow member of the PCG has helped me by creating a bit of Javascript to emulate the scrolling and using Google I've now gotten it into a state where it almost passes the W3C Markup Validation Service. However, the one error, Error Line 166,...

Javascript

10465

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9061

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7558

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6800

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5453

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5582

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4127

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3744

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2931

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General