I have a top bar, separated to three sections. Left section, center section and right section.
Every section is floated, so their position is in line.
What i would like to do is to set a padding to the left and right element.
10 left padding to left element.
10 right padding to right element.
But whenever i apply some padding for example the div element #tbl {padding-left:10px;} whole structure breaks.
What i want to achieve:
Code:
HTML:
<div id="topbar">
<div id="tbl">abc</div>
<div id="tbc">abcd</div>
<div id="tbr">abc</div>
</div>
CSS:
#topbar {
width:100%;
height:36px;
padding-top:12px;
background-color:#e7e6e6;
border-top:1px solid #d0cdcd;
border-bottom:1px solid #d0cdcd;
}
#tbl {float:left; width: 35%; text-align:left;}
#tbc {display:inline-block; width: 30%; text-align:center;}
#tbr {float:right; width: 35%; text-align:right;}
JSFIDDLE: http://jsfiddle.net/bkwdX/
Thanks
try decreasing the width of them because the padding's add up to outer width, not inner width. you define an elements width as 300px and add 10px right padding to it, the width will take 310px vertical space (in some browsers).
width:100% = width of the floated elements + padding
So you need to set width for the floated elements lower than 100% to let some space for the padding.
Related
I wonder why the phenomenon will happen?
the inner div set margin-bottom 16px
As far as I know,the outer div contact with the inner div,no padding or border,if the outer div isn't set height css style,the under div will 16px away from the outer div, because the margin is overlap.However,if height css style is set on the outer div,the under div is close to the outer div.
so,can you explain how this phenomenon is caused?
.outer {
background: yellow;
height: 100px;
}
.inner {
height: 100px;
background: green;
margin-bottom: 16px;
}
.under {
background: red;
height: 10px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="under"></div>
So first things first, let's address this:
if you remove height css style on the outer div,you will find the under div is move down
This is due to Margin Collapsing:
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.
Your child margin is collapsing with the parent margin, thus the 16px margin acts as part of the parent.
However by specifying a height, you negate margin collapsing.
From the W3 Box Model spec*:
Two margins are adjoining if and only if:
Both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
The bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height
Because the margins do not collapse, the child's margin will simply attempt to expand the height of the outer div (which won't be reflected, because the parent has a strictly set height of 100px).
But wait... what if we broke the collapse some other way? Would we see the height increase by 16px?
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
Seems easy enough. Let's add a border to break this rule.
.outer {
background: yellow;
border-bottom: 1px solid black;
}
.inner {
height: 100px;
background: green;
margin-bottom: 16px;
}
.under {
background: red;
height: 10px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="under"></div>
Voila! As expected, the margins do not collapse, therefore the child's margin attempts to expand the height of the parent. With no height property on the parent to counter this, the height of the parent grows to 116px.
* This is pointing at an older spec, however this behavior has not changed. In fact, some of the newer spec documents I've found reference/link to this one.
You cannot add a margin to child element to affect on a parent element. You may add margin-bottom:16px; to Outer class as below
.outer{
background:yellow;
height:100px;
margin-bottom:16px;
}
inner is nested inside outer, and under is directly underneath outer with no space or padding. So regardless of the margin given to inner, there'll be no space between outer and under.
You can do this by simply adding a margin-top to under.
.outer{
background:yellow;
height:100px;
}
.inner{
height:100px;
background:green;
}
.under{
background:red;
height:10px;
margin-top:16px;
}
set .outer height:auto;
.outer{
background:yellow;
height:auto;
}
.inner{
height:100px;
background:green;
margin-bottom:16px;
}
.under{
background:red;
height:10px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="under"></div>
I have this menu page that I want to split into 5 equal columns.
My current CSS for the yellow divs is:
width:20%;
height:100vh;
background-color: yellow;
display:inline-block;
Above this, I also have margin:0;. How can I remove the small white gap between the yellow blocks?
Using display inline-block has the weird sideeffect that it creates unwanted gaps between elements: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
A quick fix would be to float the div's left instead of using display: inline-block.
div {
width:20%;
height:100vh;
background-color: yellow;
float: left;
}
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
I want to have yellow div be centered in the blue div always (taking up only as much space as the text inside it), and then have the purple div float right into the yellow div, so it would basically be right aligned to the yellow div.
I think this is possible through CSS and maybe flex layout but I haven't nailed it yet
Here is the basic fiddle http://jsfiddle.net/AFzpp/
Here is the result I'm hoping for http://www.screencast.com/t/RFw7xMPy8
<div id="body">
<div id="column">
<div id="chicken">fun</div>
<div id="text"><p>test</p></div>
</div>
</div>
You can do this pretty simply.
Just get rid of your #text's width attribute and add text-align:center; to your #column.
http://jsfiddle.net/TannerJohnson/ypnrA/
http://jsfiddle.net/AFzpp/2/
text-align :center;
to make div yellow and blue center. and use
display:inline-block
to fit your div with text content
you may use inline-block display, text-align to center your containers and add a negative margin to the one you want to be aside. Negative margin virtually reduces width or space needed.
example : http://codepen.io/gc-nomade/pen/qeCGh
(this is a fork of http://codepen.io/gc-nomade/details/wqbjl )
<div>
<div>
</div>
<div>
</div>
</div>
div {
width:80%;
min-width:750px;
margin:auto;
background-color:green;
background-image:linear-gradient(to left, rgba(0,0,0,0.2) 50%, rgba(255,255,255,0.2) 50%);/* this to show where middle stands */
}
div div {
display:inline-block;
min-width:1%;/* reset */
vertical-align:top;
width:30%;
min-height:200px;/* cause example has no content */
padding:5px;
background:#0871B2;
margin: 1%;
font-size:14px;
font-size:1.6vw;
text-align:left;
color:white;
text-shadow:0 0 1px black;
font-weight:bold;
}
div {
text-align:center;
}
div div:first-of-type {
margin-left:-11%;/* reduce virtually width or horizontal space needed close to zero */
width:10%;
min-height:50px;/* reset */
background:purple;
}
div div:first-of-type:before {
content:'on left middle side';
}
I have this fragment of HTML:
<style>
#top, #left, #right
{
border: 1pt solid silver;
margin: 3px;
}
#left
{
float: left;
width:50%;
}
#right
{
float: right;
width:50%;
}
</style>
<div>
<div id="top">Text</div>
<div id="left">Text</div>
<div id="right">Text</div>
</div>
I want the "left" and "right" divs to take the entire width of the screen, so I set their width to 50% each.
For some reason, the "left" and "right" divs overlap -- the "right" div is under the "left" div. What is the correct way to style these divs so they are displayed side-by-side and occupy the entire width of the screen.
Thanks.
There is not enough space for them to align, because they each take 50% to which you have to add the four 3px margins, so the total takes 100% + 12px, and thus can't fit aligned.
See http://jsfiddle.net/ER8pR/1/
CSS:
#top, #left>div, #right>div
{
border: 1pt solid silver;
margin: 3px;
}
#left
{
float: left;
width:50%;
}
#right
{
float: right;
width:50%;
}
HTML:
<div>
<div id="top">Text</div>
<div id="left"><div>Text</div></div>
<div id="right"><div>Text</div></div>
</div>
The problem is that the total widths of #left and #top are
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
In your case, 3px+1px+0+50%+0+1px+3px = 50% + 8px, so if you sum them you get 100% + 16px, which is greater than 100%.
You can fix it removing all margins, paddings and borders and creating a new <div> inside them with width:auto and the margins, paddings and borders that you want.
add:
display:inline-block;
to your #left and #right..
div's are blocks and take up the whole row, even if theyre given a width! so make them inline-blocks so that they will stack horizontally too
That problem you are having is that you have set borders and margins on these div's so they will note stay side-by-side at 50% width. You should probably use something like 48% for your widths if you are not working within a fixed-width container.
That's because of your border and margins 50% + 1px on the left and 1px on the right equal more than 50%.Use box-sizing: border-box; to make sure your div is 50%, not more with the border. See this example http://jsfiddle.net/zvMTN/
<style>
.header {
float:left;
width:50%;
border:1px solid black;
}
</style>
<div style="width:100%;">
<div class="header">Hello</div>
<div class="header">World</div>
</div>
I want the two inner divs to appear beside each other fitting perfectly inside the parent. This happens when there is no border set on them, but when I do set a border, the second div wraps and appears below. How do I avoid that?
The reason this happens is because 50% x 2 is already 100%. The 2 px borders make the width 100% + 4 px. To undo this, use negative margins of 1px on either sides.
Demo: http://jsfiddle.net/rfSMX/1/
You may run into the 100% combined width issue in IE.
Essentially, what is happening is that your div's are sized 50% + 2 pixels (one for each border) wide. Because (50% + 2 pixels) * 2 is wider than your 100% container, it forces the floats to wrap.
Applying a -1 pixel margin to the left and right sides of your .header div's should do the trick.
Add an extra div inside the divs that need a border called header-inner.
<style>
.header {
float:left;
width:50%;
}
.header-inner {
padding: 10px;
border: 1px solid #ccc;
}
</style>
<div style="width:100%;">
<div class="header"><div class="header-inner">
Hello
</div></div>
<div class="header"><div class="header-inner">
World
</div></div>
</div>
This could work:
because you don't need to float the second div it should fill up any space that is left after the first div. This allows you to add a border and still have them flush side-by-side