This question already has answers here:
css background color with floating elements
(5 answers)
Closed 6 years ago.
This is my html:
<div class="header_wrapper">
<div class="main_nav">
<div>TEst</div>
<div>TEst</div>
<div>TEst</div>
</div>
<div class="clear"></div>
</div>
As you can see I want to build a menu with floating divs. Doing so the background of main_nav disappears.
.header_wrapper{
height:129px;
background:url('images/layout/header.png') no-repeat #1f1f1f;
border-bottom:1px solid #1f66ad
}
.header_wrapper .main_nav{
position:relative;
top:77px; left:336px;
width:750px;
background:red;
}
.header_wrapper .main_nav div{
float:left;
}
.clear{
clear:both;
}
I tried to use clear:both, however the background is still gone. Any ideas why?
Adding overflow:auto; to main_nav brings the background back.
This is because floated content does not take up any space. Your parent main_div division essentially takes on a height of 0 because it has no other content, which "hides" the background (there is no height to display behind).
This information is available in the css-floating tag wiki and I've also posted other more detailed information about floating and parent containers.
Put overflow on .main_nav
.header_wrapper .main_nav div{
float:left;
overflow: hidden;
}
Your clearing div forces its parent to expand, it has no effect on its sibling's background.
You have to clear to your float DIV's parent which is .main_nav. Write like this:
.header_wrapper .main_nav{
overflow:hidden;
}
Related
i'm trying to create a header which contains 3 main elements centered on the page. On both sides of the 3 main divs i'd like to add another div which overflows the page by half it's width.
Like so. Both red divs are twice the length as shown, but overflow:hidden cuts them off.
This is easy enough to create but when i try to add the content of the blue diffs suddenly all of them slide down
I don't understand why this happens.
Furthermore when i add some content to the side divs everything falls back into place
So then i thought of just adding a nbsp; to the red divs to keep everything in position. Which worked. however when i try to center the content of the blue diffs vertically by adding a padding-top the red diffs move down for reasons unknown to me
here is my css
div.padded{
padding-top:20px;
}
.header{
width:100%;
border:2px solid black;
white-space:nowrap;
overflow:hidden;
}
.leftExtend{
width:25%;
margin-left:-12.5%;
background-color:red;
display:inline-block;
}
.middle{
width:25%;
background-color:blue;
display:inline-block;
}
.rightExtend{
width:25%;
background-color:red;
display:inline-block;
}
and the html
<div class="header">
<div class="leftExtend">sometext</div>
<div class="middle padded">aaa</div>
<div class="middle padded">bbb</div>
<div class="middle padded">ccc</div>
<div class="rightExtend">sometext</div>
</div>
I created a jsfiddle to demonstrate the problem.
Why does this happen, what am i doing wrong and what would be the correct way to achieve this behavior?
Try add vertical-align: top; to the divs:
.header div {
vertical-align: top;
}
The default is baseline which causes them to appear at the bottom.
JS Fiddle
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 8 years ago.
I have been trying to make two divs float side by side or basically the shopping cart and the items (namely jcart and cartbox) but cant seem to get it. Here is the demo: link
i tried change float:right; on the cartbox css but that would only move the shopping cart to the right and if I remove the float on the cartbox css.. The cart and the items align side by side but for some reason cart appears to be really small and the "add to cart" button doesn't appear to click. Any help will be appreciated!
HTML:
<form method="post" action="" class="jcart">
<fieldset>
// item details here
</fieldset>
</form>
<div class='cartbox'>
<div id="jcart"><?php $jcart->display_cart();?></div>
<div id='jcart-loader'><img src='img/ajax-loader.gif' alt=''></div>
</div>
CSS:
#jcart {
position:relative;
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
.jcart {
width:135px;
margin:0 20px 20px 0;
padding-top:20px;
border:solid 2px #E5E5E5;
float:left;
background:#F0F0F0;
text-align:center;
}
.cartbox {
float:left;
position:relative;
top:0;
width:500px;
margin:0;
padding:0;
}
You need to add display: inline-block on the elements you wish to align side by side, as div elements have a default style of display: block, meaning they will stack vertically instead of horizontally (not the behaviour you want).
From the looks of it; the shopping cart box is too wide to fit side by side in the content container as well. Make the div with the id centre wider (possibly to 1000px instead of 960px), and coupled with the addition of changing the display property, that should do it.
In terms of the code you need to write directly in order to get this to change, do the following:
#centre {
width: 1000px;
}
.cartbox {
display: inline-block;
}
EDIT: I modified these changes to your website locally and it appears to have worked.
add float:left to your css code in #jcart:
#jcart {
position:relative;
float:left
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
You can use display property to inline or inline-block as #Sam Holmes said
or you can do something using float. like this:
.cartbox div{
float:left;
}
or
.cartbox div{
display:inline;// or display:inline-block;
}
here is the Demo
It is because you don't have enough space in the parent Divs.
I tried to set it to 10px and it allinged fine.
I have few <div>s having display:inline-block, inside an absolute positioned parent <div>.
HTML
<div id='wrap'>
<div id='container'>
<div class='box'></div>
<div class='box'></div>
<div class='box'>#</div>
<div class='box'></div>
</div>
</div>
CSS
*{
margin:0;
}
html, body{
height:100%;
}
#wrap{
position:relative;
background:lightgreen;
height:100%;
}
#container{
position:absolute;
bottom:0px;
vertical-align:baseline;
}
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
}
When I add some ascii character codes in any of the <div>s, strangely other <div>s move up. if I remove the ascii character then all <div>s align perfectly in the same row.
check this JSFiddle
I am aware of other ways for making this layout, I can make the boxes absolute and force them to be positioned at the bottom of the parent, I'm aware of css3 flex.
But I'm interested in this specific problem, can somebody explain why is this happening..? or how can I fix it as it is?
Update
I am not interested in fixing it, since there are many ways to achieve the same alignment. I just want to understand what's happening. The question is, the divs are being being aligned at the bottom by default. Why does the other divs suddenly aligns at the top when one of the divs have character inside it?
Updated Fiddle with both scenarios
side note: this only happens when I add text inside the elements, if I add an HTML element instead of a character all divs still aligns at the bottom.
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
vertical-align: top;
}
add vertical-align: top;
when
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 9 years ago.
I was wondering what would be the best way to vertically center a div inside another div. The only constraint I have is that .anim needs to remain relative! I lsited the current code I have now down below. Thanks guys!
HTML:
<div class="anim">
<div class="spacer">
<p>CONTENT</p>
<p>more content</p>
</div>
</div>
CSS:
.anim {
position:relative;
width:75%;
margin:auto;
height:50%;
}
.spacer{
position:absolute;
height:300px;
top:0;
bottom:0;
}
.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}
would have it vertically aligned
An easy way to do this is to give your .anim div a fixed height of, let's say, 500px.
Then you can just add a margin-top :
.anim {
margin-top: 100px; // (500 - 300) / 2 = 100
}
demo
according to w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
so the code is really simple
.anim {
display: table-cell;
vertical-align: middle;
height: 200px;
}
here is the demo http://jsfiddle.net/AbTxS/
From your question it looks like you want something like this... div.spacer is vertically centered and div.anim remains relative.
The div.spacer top margin must be negative half of the .spacer height.
This solution only works with a fixed height for .spacer.
CSS
.anim {
position:relative;
width:75%;
margin:auto;
height:800px;
background:#FF0
}
.spacer {
position:absolute;
top:50%;
margin:-150px 0 0;
width:300px;
height:300px;
background:red
}
HTML
<div class="anim spacer">
<p>
Content
</p>
<p>
More content
</p>
</div>
You can see the fiddle here: http://jsfiddle.net/easeS/4/
Here is the html/css I have:
#main div
{
float:left;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
}
<div id="main">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>
I'm not sure why but it bumps the third div down to a new line instead of hiding it. Any suggestions?
The 3rd div bumps down because there's not enough space for it to float.
Your 3 divs added up together (inc. margin) is equals to 120px;
The wrapper (#main) is 100px.
Therefore bumping the 3rd div down.
If I understood your question correctly...
What you want to do is hide it the 3rd div, for you to do this, you'd need to:
Add another wrapper div and give it a bigger width. Have a look at my example here
No need to add extra wrapping divs...
Try this instead:
#main div
{
display:inline;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
white-space: nowrap;
}
Just changed the float rule to display: inline on the divs and added white-space: nowrap to #main.
Is because your divs in your div#main are confined only to those dimensions specified in the style of div#main. To float to infinity and beyond, they need to have a space where to float. You can wrap your divs in a container with a very high height.
Try with this demo.