I have been developing a site using absolute height values and was curious as to why height:auto isn't working for me, can anyone shred some light on this.
HTML Structure
<div id="site-content">
<div id="menuconatiner"></div>
<div id="review-container"></div>
</div>
CSS
#site-content{
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
width: 938px;
padding-bottom:20px;
background-color:white;}
#menuconatiner{
margin:5px;
float:left;
width:190px;}
Use the following CSS and you wont need the height attribute anymore.
#reviews-content {
display: table;
}
The reason why your div isn't auto expanding in height is because it contains floating elements, but you're not using a clearfix. This might be useful links:
What is a clearfix?
http://nicolasgallagher.com/micro-clearfix-hack/
My solution above might solve your problem now, but I suggest using a clearfix in the future.
As mentioned in my earlier comment in the OP, the issue is because both the child elements of the div are floated. When an element is floated, its parent no longer contains it because the float is removed from the flow. Since the parent isn't containing the child elements, the height: auto wouldn't work (actually, will work but would have no effect).
Option 1: Remove the float: left on "review-container" and height: auto will work as you expect, but this has some implications as mentioned in JrnDel's comment.
Option 2 (Best): You could add a clearfix div as mentioned in both your own comment in OP and by JrnDel in the comment for this answer.
Related
I am trying to achieve the following layout in html. Bigger div 1. Then another div next to it with a margin on the top. If I give float: left to the first div, on giving margin-top to the second div also brings the div 1 down. :(
please suggest.
Here's what you want, tested and working :)
http://jsfiddle.net/4FWWp/
HTML
<div id="first"><p>Hello<br/>Test</p></div>
<div id="second">World</div>
CSS
#first{
background-color:red;
float:left;
}
#second{
background-color:blue;
float:left;
margin-top:52px;
}
Take a look:
http://jsfiddle.net/Dc99N/
.d {
display: inline-block;
border:2px solid;
width: 200px;
height: 200px;
}
.sm {
margin-top: 50px;
height: 150px;
}
Took a quick stab at it and it seems possible.
What you need to is display inline-block on the divs and set the height of the divs as percentages.
Check out my codepen : http://codepen.io/nighrage/pen/bKFhB/
The grey background is of the parent div.
Flex-box could be the best and easier solution.
IE supports it since version 11, and currently all major browsers have a good support. Maybe is still a little soon but.... I think that in few months could be a very interesting feature.
Please, look at Flexible Box Layout Module
friends,
I decided to ask this because I've seen many answers on the internet, but no one seems to be a definitive answer.
In out HTML documents we have many elements one inside another. Eventually we'll want to add paddings and margins to these elements.
So, what if we want to have all content horizontally aligned to the center of the page? If the content has 1000px of width and the screen resolution will change from device to device, the most common solution is something like (will work on netscape based browsers):
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
But if we have lots of other elements inside the #content element, like a table made of DIV elements, we start to face some problems. The parent's height will not adjust to its children's height and padding and margin will not work properly (if we inspect the element we will see that the width and height is not behaving as expected) unless we add some new rules.
I use float: left but then the headache starts! When I add float: left only those elements will work fine, but the parents will not. If I add float: left to an element that already has margin: 0 auto set, it will no longer be aligned to the center of the page...
I've seen some solutions using text-align: center to the parent and display: inline-block; float: none; to the element we want to be aligned to the center. But it also has many problems (for example, we can't set the float rule)
How do you deal with this problem guys?
You need to use clear after you use float on elements in order to 'clear the floats' and make the height propagate up to its parents. You can use clear:left (or right) to just clear float:left elements but typically it's fine to just use clear:both.
In the below example there are two versions of clearfixes, one that uses a pseudo-element on the container and another that is just another element.
Demo
HTML
<div id="content">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div class="float-me">Test1</div>
<div class="float-me">Test2</div>
<div class="clear"></div>
</div>
CSS
#content {
width: 500px;
margin: 0 auto;
}
li {
float:left;
}
/* our pseudo-element clearfix */
ul:after {
display: block;
content: "";
clear: both;
}
.float-me {
float:left;
}
.clear {
clear:both;
}
I'm certain this has been asked before in some form or other, but I just can't find an answer..
I have some nested divs
<div class="parent">
<div class="child">A</div>
</div>
And the child has display:inline-block and overflow:hidden
.parent{
background-color:red;
}
.child{
background-color:green;
display:inline-block;
overflow:hidden;
}
And it gets rendered like this:
You can notice that the parent is 5px higher than the child.
Where does the extra height come from?
Here is the sample: http://jsfiddle.net/w8dfU/
Edit:
I don't want to remove display:inline-block or overflow:hidden, this is a simplified example to illustrate the problem, but in my real layout I need them both.
I just want to understand why this extra height appears. Is it specified somewhere that it should be like this? Is it a consequence of some other css feature?
I had this issue when building a horizontal slider. I fixed it with vertical-align:top on my inline-block elements.
ul {
overflow-x: scroll;
overflow-y:hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
ul&::-webkit-scrollbar {
display: none;
}
li {
display: inline-block;
vertical-align: top;
width: 75px;
padding-right: 20px;
margin:20px 0 0 0;
}
The accepted answer above is correct, but it does not give the explanation I was looking for.
A good explanation was provided by #Alohci in his comment.
Explanation in a few words:
The value for vertical-align is baseline, therefore the child div is aligned with the baseline of the text.
This text baseline is not the same as the bottom line. It's a bit higher up, to accommodate letters with descenders: p, q, g.
This is why the problem is fixed by setting vertical-align:top.
.child{
background-color:green;
display:inline-block;
overflow:hidden;
vertical-align: top;
}
This extra space coming from overflow:hidden of Child class. Remove this property and check and if your really wanted to use overflow:hidden property then use negative margin to child class . You can remove this extra space.
I am trying to float multiple divs (2 pictured, another will be added later). The problem is that the site container seems to ignore them when set to auto. I am not sure if this is something wrong with the container css, or the css used to with the divs. How would I go about getting the site container to recognize the floats? Thanks in advance.
Relevant HTML:
<div id="storehours">
<div id="hoursheader"><p>Shop Hours</p></div>
</div>
Relevant CSS:
#storehours {
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin-left: 11px;
margin-bottom: 15px;
width: 250px;
height: auto;
float: left;
}
(That code is for the div on the right, the left one is the same but contains the form, which I don't think is the problem.)
Edit: Updated with clears and fixed cap letter. Still having the same problem.
Edit2: For clarification. The html is within the container that also contains the google maps. As you cans see, the floats cause the container to ignore them and they start at the bottom of the container. I could potentially fix the problem by setting a height on the container instead of leaving it auto, but is that good practice?
You should add overflow:hidden; on the style of the container <div id="storehours">
.
It is because you are not clearing your floats use this
<div style="clear: both;"></div>
For me, one of the most useful features of tables is that their width adjust to its content.
You can very easily do things like:
<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>
If the content of that box is wider, the box will be wider. Very intuitive and it works on ALL browsers, period.
You can achive something similar for normal block elements by using the float CSS property, i.e. their width adjust to its content. But the element will not be centered.
So, the question: How can you center a block element and make that element to adjust its width to its content in a cross-browser manner?
The modern way is to specify display:table and the workaround for IE is having a parent element and text-align:center on a inline/inline-block:
<div id="for-ie">
<div id="el">whatup son</div>
</div>
<style>
#el {
display:table;
margin:0 auto;
}
/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el {
zoom:1;
display:inline;
}
</style>
Demo
Here's a quick tutorial I wrote on this subject: http://work.arounds.org/centering-block-level-element-variable-width/
I'll lengthen it when I'm not sleepy.
Quoting CSS: The Definitive Guide by Eric Meyer
If both margins are set to auto, as shown in the code below, then they are set to equal lengths, thus centering the element within its parent:
p {width: 100px; margin-left: auto; margin-right: auto;}
Setting both margins to equal lengths is the correct way to center elements, as opposed to using text-align. (text-align applies only to the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it.)
In practice, only browsers released after February 1999 correctly handle auto margin centering, and not all of them get it completely right. Those that do not handle auto margins correctly behave in inconsistent ways, but the safest bet is to assume that outdated browsers will reset both margins to zero.
However,
One of the more pernicious bugs in IE/Win up through IE6 is that it actually does treat text-align: center as if it were the element, and centers elements as well as text. This does not happen in standards mode in IE6 and later, but it persists in IE5.x and earlier.
If your intend is to display just some text at the middle of the page, you can use something like this:
<div style="text-align:center;">
<div style="background:red;display:inline;">
Hello World!
</div>
</div>
The first block will align contents to the middle. The second will fill the height equal to its contents, since display:inline will force the <div/> block to behavior like a <span/>, ie. adjust its width to content, and not to the remaining space.
Note this is limited to single line text only (like "some text here").
Use this CSS
#content {
position: absolute;
width: 150px;
margin-left: -75px;
left: 50%;
border: 1px solid #000;
text-align: center;
padding: 20px;
}
and this html
<div id="content">
some text here
</div>
Good golly, miss Molly! These answers are really overcomplicated.
CSS:
div.centered {
width:100%;
margin:0 auto;
text-align:center;
}
div.centered span {
padding:20px;
border:1px solid #000;
}
And then use this in your body:
<div class="centered"><span>Hello world!</span></div>