css/html: vertical div-alignment-Problem (added live-demo) - html

I have a problem with aligning some divs in this case:
<div id="preamble" style="margin-bottom: 100px;">Preamble</div>
<div id="container" style="position: relative;">
<div id="content" style="position: relative; margin-top: 50px;">
Content
</div>
</div>
(Of course this is only an example that reproduces the behaviour I want to avoid.)
I would have expected the content-div to align from the container-div. Therefore there should be 150px alltogether between "Preamble" and "Content".
However, (at least in Firefox) this is not the case. The container-div is simply ignored and therefore the content-div's margin-top is ignored too, as long as it is not bigger than the margin-top of the preamble-div's margin-bottom.
What can I do? Is there an additional css-rule I would have to apply? I would like to keep position: relative aswell as the html-structure.
Thank you!
[edit2]
Hope you are still with me ;-)
Sorry for the delay... here's a live-demo. It's so live, I even did a small jquery-script to illustrate the problem - just try out the buttons.
Live Demo
Thank you!
[edit]
The way it is:
(source: 666kb.com)
The way I want it (without the borders)
(source: 666kb.com)
I hope the difference is obvious although the images are jerky ;-)

That's because overlapping vertical margins are collapsed.
The CSS2 specification says:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
In your case, because #preamble's margin-bottom and #container's margin-top overlaps, they get collapsed, so the effective margin is the bigger one (in this case, 100px).
If background color is not an issue, you can use padding instead of margin.

<div id="preamble" style="margin-bottom: 100px;">Preamble</div>
<div id="container" style="position: relative;">
<div id="content" style="position: relative; margin-top: 50px;">
Content
</div>
</div>
First of all, i recon making a stylesheet. It will save you time when you have alot of elements and also will keep your code cleaner.
What i see when i test your code is that the content div is showing inside of the Container with a margin on the top of 50px. What's wrong?
I think what you want to achiev is this:
<div id="preamble" style="margin-bottom: 100px; border: solid black 1px;">Preamble
<div id="container" style="position: relative; border: solid black 1px;">
<div id="content" style="position: relative; margin-top: 50px; border: solid black 1px;">
Content
</div>
</div>
</div>
Good luck! You didn't nest the Div inside the other one and therefore it wouldn't be a total of 150px together ;). Remember Margin is Outside the cell and padding inside the cell!
When i read now that you want to keep your html structure the same, that's not possible.
As soon as you give your first div a margin of 100px this means the next element will be placed 100px under that element. And because you a nested div next with a margin on the top of 50px this means you create more then 150px of total space...
Why did you wanna maintain your html structure?

I found a way out of this miracle: the good old overflow: hidden; trick...
When you add the property overflow: hidden; to #container, the behaviour is just like expected.
You can proove the difference here
Still I'm not completely convinced. Why does this trick solve my problem and are there other ways to do it?
Thanks for your help anyway!

Related

How can I get a CSS margin to overlap with CSS padding to avoid redundant spacing?

Basically I have a wrapping <div> mean to add a border around something. It has a padding of 19px. Inside that wrapping <div> I want to insert pretty much any kind of content. Currently, it has another <div> inside. The problem is that that internal <div> has a bottom margin of 20px, so there is a space of 39px between the end of the internal <div> and the border, which just looks awkward.
As far as the question is concerned the relevant code is just
<div style="padding: 19px;">
<div style="margin-bottom: 20px;"></div>
</div>
I just want to know how I can make the margin of the inner div overlap the padding of the outer div (or alternatively be set to zero by CSS acting on the class of the outer div).
Is there a way to make the bottom margin of the last item in the wrapper overlap with the padding? Alternatively, could I simply set the margin of the last child of the wrapper to 0px?
I actually figured out a way that seems to work for the alternative option (setting the bottom margin of the last child of the wrapper to 0px). Here's the relevant CSS where "callout-box" is the class of the wrapper.
.callout-box > :last-child {
margin-bottom: 0px;
}
I'm still curious if there's a way to actually cause the margin and padding to overlap without removing the margin. In this case, there is a 1px difference since the solution I just gave sets the spacing to 19px whereas overlapping the margin and padding would give 20px.
I just want to know how I can make the margin of the inner div overlap the padding of the outer div (or alternatively be set to zero by CSS acting on the class of the outer div).
Answer:
Very simple just add negative top margin. Look at the code below.
<div style="padding: 19px;">
<div style="margin-bottom: 20px; margin-top:-19px;">Inner Div</div>
</div>

Some doubts related to the use of CSS clear property in a specifi case

maybe this is a stupid question but I have a doubt about CSS clear propery use.
I have this template: http://onofri.org/example/WebTemplate/
Why if I delete (you can try with firebug) the propery clear: both from the #footcontainer div I obtain that this div is placed at the top (it seems almost below the header and below the two columns)
My idea is this thing happens because the two columns #content and #sidebar are floated to the left and without setting clear: both on the #footcontainer div the browser try to put also this div on the right of the #content* div but have no space and put at the top.
Is this a right intuition or am I missing something?
Tnx
Andrea
This is happening because everytime you float an element, its container loses its auto height.
If you want to prevent that from happening, there are somethings you can do:
Set a given height to the container
Ex:
<div class="my-container" style="height: 100px">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
</div>
Be aware that if you have set a given height, the div won't resize as the content becomes higher than the container.
Append a div with style="clear: both" right after the floated elements
Ex:
<div class="my-container">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
<div style="clear:both"></div>
</div>
Yeah, it works. But only noobs do it like that. It's not elegant and pollutes your code.
Set overflow: hidden to the parent container
<div class="my-container" style="overflow: hidden">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
</div>
This one is great, but you are in danger if you have someting positioned absolutely and have to move it outside the parent div, for example. You'll have an unpleasant surprise.
Use the ClearFix Hack.
This is the way I do it: easy to implement and works like a charm. Check this link out: http://www.positioniseverything.net/easyclearing.html;
If you mind about not having valid CSS (like me), you can target IE browsers with a different stylesheet and conditional comments, for example.
Further resources about the subject:
Quirks Mode Site: CSS Clearing
http://www.quirksmode.org/css/clearing.html
Chris Coyier's ClearFix Tutorial
http://css-tricks.com/snippets/css/clear-fix/
I see you code
your code is too complicated according to me but any way you can used to this css than your problem is solve
Used to this css
#c{position:relative;}
#c:after {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: -42px;
background: url('http://onofri.org/example/WebTemplate/images/footerRight.jpg') no-repeat -3px 0px;
height: 43px;
}
#footerRight{display:none;}
You have no height set on your container. If you change the height of container to the height of its' contents, which in this case is 596 px then when you take away the clear both property on the footer it won't move one iota.
I think it's because if you float an object, the parent object doesn't resize accordingly.
For example, if you had:
<div class="1px-border">
<div class="float">
<h3>TEST</h3>
</div>
</div>
The border would be completely flat, and not resize to the header. You could fix it by having overflow: auto in the container div.
That said, I could be massively wrong.

Why aren't these two divs displayed how I expect them to be?

This jsfiddle example shows what I'm talking about, I gave the div in question a red border to show how it's displayed.
I'd expect the #searchwrapper_3 div to go inside the #col_st_cautare one, but for some reason that's not how it works. I've been staring at it for a while now and I got no idea why it's showing like that
I also have an example of it looking ok simply because i've added another element after the #searchwrapper div here.
Issue's fixed, TIL a div will collapse if it contains only floating elements.
You need to do a clear:both; - see the end of http://jsfiddle.net/wzYry/3/
<div style="border: 1px solid red;" id="col_st_cautare">
<div style="float: left;" id="searchwrapper_3">
.... code ....
</div>
<div style="clear:both;"></div>
</div>​
On a side note, it may be easier to make clr class in your styles.
.clr{clear:both;}
This way you can use this anytime you need to clear
<div class='clr'></div>
If a div contains only floating elements, it height will collapse.
You can add a <div style="clear:both;"> or use some techniques from this article, for example overflow:hidden:
<div style="border: 1px solid red;overflow:hidden" id="col_st_cautare">
This is happening because the child elements inside are floated and parent lost track of the how to wrap them.
Probably the easiest fix for this
#col_st_cautare { overflow: hidden; }
Demo
Other than this, the stable solution would be to add <div style="clear:both;"></div> before the closing the element.

4 Column Div Layout

I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.

Adding side by side divs confusion

I always seems to get this simple HTML stuff wrong. I am currently trying to add side by side divs in the middle of a page on this test page I made:
http://www.comehike.com/hiking_dev.php
The code I added was something like this:
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
I added <strong> tags so you can spot it on the page better.
But do you see there is text that appears there that reads like this "When considering the injury risk of any" - but that text is in the <p> tag below. Why is it appearing there?
Is it better practice to wrap my 2 divs that I am trying to align, within another div?
After your two floating divs, add another empty div...
<div style="clear:both;"></div>
This will cause the two floating divs to push all subsequent content below them. As you have it now, there is 200 pixels of empty space after the first div allowing the other content to simply wrap around it.
Increasing the width of the floating divs may not be desirable for your layout so clear:both; is most typical for this situation.
Surround those two divs in a parent div with overflow set to hidden.
<div style="overflow:hidden;">
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
</div>
An alternative (as others have pointed out) is to use a third element:
<div style="clear:both;"></div>
It's debatable as to which is better. Usually, either is just fine. Here's a post about the topic:
Floated Child Elements: overflow:hidden or clear:both?
You'll either need to add a div below your two divs with clear:both; as others have suggested, or you could add clear:both; to the following <p> element.
Because you have an entire page width of 960px. You're combined div widths are 760px (400+300). If you add 200px to the second div you should be fine.
Edit: Because of padding, you can increase either of the divs by 150px and be fine.