Issue with divs stacking beside each other - css

I'm having some issues with aligning 3 divs beside each other.
http://jsfiddle.net/Lpprn/
I have a strong feeling it's in the syntax, but I can't for the life of me figure it out.
#story-container {
width: 700px;
padding: 0px;
margin: 0 auto;
}
#story-left {
width: 300px;
padding: 10px;
padding-right: 0px;
float: left;
text-align: right;
margin: 0;
background-color: #000000;
}
#story-center {
width: 100px;
float: left;
margin: 0;
background-color: #ffffff;
}
#story-right {
width: 300px;
padding: 10px;
padding-left: 0px;
float: left;
text-align: left;
margin: 0;
background-color: #808080;
}
Thanks for your help!

The containing elements don't add up to the width of the parent, 700px.
This is because padding is added to the width of the children elements.
Therefore, 300px + 10px + 100px + 10px + 300px != 700px
You would either have to subtract the padding values from the widths, or use something like box-sizing, which changes the box model of an element, thereby causing its padding/border properties to be calculated into its width/height.
The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
border-box: The width and height properties include the padding and border, but not the margin.
From MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I added the following to each element, though it actually wouldn't be needed on the middle element, #story-center, as it currently doesn't have any padding.
jsFiddle example - it works now - (red background added to display the parent container)
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

Related

Clarification about Flexible Padding

I'm reading Responsive Web Design by Ethan Marcotte to learn more about building responsive web pages. At one point in the book, he says:
When setting flexible margins on an element, your context is the width of the element’s container.
When setting flexible padding on an element, your context is the width of the element itself. Which makes sense, if you think about the box model: we’re describing the padding in relation to the width of the box itself.
Regarding flexible padding, I've found this to not be the case. The padding is based on the width of the element's containing element. Now I've found this book to be of high quality overall, so I'm confused as to whether there's something I'm not getting, or if the book just got it wrong.
I created a JSFiddle to get to demonstrate.
https://jsfiddle.net/u1fq7ttq/27/embedded/result/
HTML
<section>Content...</section>
<aside>Content...</aside>
CSS
body {
width: 960px;
margin: 0 auto;
}
section {
box-sizing: border-box;
border: 3px solid red;
width: 520px;
height: 500px;
margin: 0 2.0833333%; /* 20px / 960px */
padding: 0 3.125%; /* 30px / 960px */
float: left;
}
aside {
box-sizing: border-box;
border: 3px solid blue;
width: 360px;
height: 500px;
margin: 0 2.0833333%; /* 20px / 960px */
padding: 0 6.25%; /* 60px / 960px */
float: right;
}

Padding top as percentage of width not working

Here is my example code:
body {
margin: 0;
padding: 0;
border: 0;
background: #444;
}
#container {
width: 25px;
margin: auto;
margin-top: 2px;
padding-top: 1%;
border-bottom: 3px solid #58e;
background: #fff;
}
<div id="#container">text</div>
When I run it in chrome and inspect element the computed style of the div, the width is coming as 25px as defined above but the padding-top is coming as 13.65px.
I know that the padding-top is calculated based on % of the width of the element. So it should be 1% of 25px or 2.5px.
Why is it coming as 13.65px?
On MDN for padding :
Percentages refer to the width of the containing block [source]
This means percentage padding is calculated according to the width of the parent element, not the element itself.
In your case padding top for #container is calculated according to the width of <body>.

How to add borders to div without messing up the layout?

I have the following elements:
<body>
<div id="container">
<div id="sidebar1"></div>
<div id="content">
<h3>Lorem ipsum</h3>
<p>Whatnot.</p>
</div>
<div id="sidebar2"></div>
</div>
</body>
Following this style:
/* ~~ this fixed width container surrounds all other divs~~ */
#container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
#sidebar1 {
float: left;
width: 180px;
/*border: 2px solid black;*/
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
#content {
padding: 10px 0;
width: 600px;
float: left;
}
#sidebar2 {
float: left;
width: 180px;
/*border: 2px solid black;*/
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
I am trying to achieve this layout: http://jsfiddle.net/QnRe4/
But as soon as I un-comment the borders it turns into this: http://jsfiddle.net/FZxPQ/
** Solved **
The border width was added to each element's total width making them too wide to fit in the container. Removing 2x the border width from each column's width solves the problem: http://jsfiddle.net/FZxPQ/4/
CSS box-sizing to the rescue! This property
alters the default CSS box model used to calculate widths and heights of elements
The border-box value means that
the width and height properties include the padding and border
/* support Firefox, WebKit, Opera and IE8+ */
#container, #sidebar1, #sidebar2 {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
However, browser support is not 100% standardized.
As other answers have already mentioned the extra width which pushes the sidebars out of alignment is because the width calculation includes the border width. box-sizing simply tells the browser that an element with a given width/height should include any border and padding values into the final width/height calculations.
The problem is that when you add in the boarder, the size of the outer divs increased by 4, 2px on each size. So, your container needs to grow in size by 8px.
So change your container to:
#container {
width: 970px;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
See: http://jsfiddle.net/QnRe4/13/
When you apply the borders, that goes outer the divs, so the sidebars will have 184px width which doesn't fits to the container. try addig width: 176px
http://jsfiddle.net/QnRe4/12/
#sidebar1 {
float: left;
width: 176px;
border: 2px solid black;
background-color: #EADCAE;
padding: 0px 0px 100% 0px;
}
Like this? http://jsfiddle.net/QnRe4/3/
What's happening is that your elements are losing their block display properties when you remove the borders.
So, adding display: block to those elements resolves that.
I've also adjusted your element's widths by 4px in width to retain the layout, since removing those borders essentially reduces the space that those elements occupy on-page.

How to set equal heights for child divs with CSS

There is fiddle http://jsfiddle.net/only_dimon/6fgyy/
There is css:
.row {
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.news {
width: 190px;
margin-left: 15px;
border: solid 1px #ccc;
background: #ddd;
float: left;
box-sizing: border-box;
padding: 10px;
height: 100%;
}
.news:first-child {
margin-left: 0;
}
JQuery defines div's height without no problems. Why children div can't get 100% height of parent? Red that the height of div with auto height is non-set value. Why is that so?
In example, overflow:hidden make the div "row" to get the max height of childs. And it visualy changed width of itself.
Please, explain me.
Tnx in advance.
Read the specification of CSS height property.
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'. A percentage height on the root element is
relative to the initial containing block.
Note: For absolutely positioned elements whose containing block is based on a block-level
element, the percentage is calculated with respect to the height of
the padding box of that element. This is a change from CSS1, where the
percentage was always calculated with respect to the content box of
the parent element.
So you should either set the children's position to absolute (which will ignore the float setting and will need explicit horizontal positioning for each child) or specify the height of the container explicitly such as:
.row {
position: relative;
height: 400px;
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
}
Here is your updated fiddle.
Also, check out this approach about "Equal Height Columns".
Height inheritance needs to go all the way up the tree.
Try:
body, html { height:100% }
.row {
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
height:100%;
position: relative;
}

Width: 100% Without Scrollbars

I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
Because you're using position: absolute, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px space on the left and right.
You have to remove the margins on the #news item
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
Try googling for "css flexible ( two/three-collumn) layouts".
Here's an example,
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.
We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.

Resources