473,413 Members | 2,056 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Horizontal margin collapsing

Let's say I have some block elements that self-organize by floating to
the left, so if no more blocks can fit in a row they begin on the next
row (see crummy ASCII art at end of message).

I could define the CSS for one of the floating elements as such:

..floater
{
float: left;
width: 48%;
margin-left: 1%;
margin-right: 1%;
}

The problem here is that the floaters will then have twice as much
margin in between them as they will between the floaters and the sides
of the container. Now, in CSS2 (and 3?), vertical margins can collapse
(so that the margins of two elements are overlapping) but horizontal
margins are unable to do so. Is this correct? And can anyone think of
an elegant way to simulate this - and get equal spacing between the
floaters and the edges, and the floaters and each other?

I could do something like this:

..floater:nth-child(2n) { margin-left: 1%; margin-right: 0.5%; }
..floater:nth-child(2n+1) { margin-left: 0.5%; margin-right: 1%; }

except that (a) that pseudoclass is not (AFAIK) widely supported, and
(b) what if I have more than two elements per row?

That turned out to be far longer-winded than I expected; I hope someone
read all the way through :-)

Thanks,
Jeremy

Crummy ASCII Art Diagram:

__________________________________________________ ______
|Container |
| _______________________ _______________________ |
| | Floater #1 | | Floater #2 | |
| | | | | |
| | | | | |
| | | | | |
| |_______________________| |_______________________| |
| _______________________ _______________________ |
| | Floater #3 | | Floater #4 | |
| | | | | |
| | | | | |
| | | | | |
| |_______________________| |_______________________| |
| |
|_________________________________________________ _______|
Aug 9 '06 #1
1 5924
Jeremy wrote:
Let's say I have some block elements that self-organize by floating to
the left, so if no more blocks can fit in a row they begin on the next
row (see crummy ASCII art at end of message).
<snip>
Please disregard this message on the grounds that I'm an idiot.

Solution: floaters have equal margin on both sides. *Container* gets
left and right padding equal to this margin.

Duh.

Jeremy
Aug 9 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Brian | last post by:
I have a page with content, navigation, and footer divs, in that order. The nav div has position: absolute, width 8em, on green background. The other divs have an 8em green left border, such that...
1
by: Corvus | last post by:
Hi All, I've been having real trouble with some css in both Win/IE6 and Win/Firefox0.9.2 that doesn't make sense to me. I have a div that is supposed to be spaced away from the top and right...
1
by: Peter Mount | last post by:
Hi When I zoom into my site (http://www.petermount.au.com) with Opera 7.54 the horizontal scrollbar doesn't show when the site image is bigger than my screen. Yet the horizontal scrollbar shows...
19
by: Thomas Mlynarczyk | last post by:
Hello, The following gives different results in IE and "Non-IE" browsers: <div style="background-color: green; width: 200px"> <div style="margin-top: 20px; background-color: red"> Hello...
2
by: Stanimir Stamenkov | last post by:
I'm trying to clear some sizing issues relative to the initial containing block and the root document element. The sample document I'm trying with: http://stanio.info/viewport_fill.html ...
1
by: camphor | last post by:
hi, I have a single column webpage with a horizontal dropdown menu and am trying to make the nav bar fit across the page, the column is 800px, it looks ok in dreamweaver 8 but when I test it in...
3
by: =?ISO-8859-1?Q?Ney_Andr=E9_de_Mello_Zunino?= | last post by:
Hello. I seek confirmation for the reasons behind a margin-related behavior I have observed. I have set up a simple test page to illustrate the issue. The page shows a very simple 2-column...
8
by: ayamopamo | last post by:
Hi- I am trying to center a web page. It seems like this should be very simple to do, but apparently it isn't my day. I have successfully centered the background by calling it in the css body tag:...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
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,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
agi2029
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,...
0
isladogs
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...
0
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...

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.