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/
Related
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>
How do I set the width of a div if I want it to be exactly as wide as its contents are. However, I have many children in my DIV that inevitable collapse because they take up more horizontal space than the div allows.
I have this CSS:
.outer{
width: 100%;
background-color: green;
}
.inner{
width: auto;
display: inline-block;
margin: 0 auto;
background-color: red;
}
.row{
float: left;
width: 250px;
background-color: blue;
display: inline-block;
}
And this is my HTML:
<div class="outer">
<div class="inner">
<div class="row">asd1</div>
<div class="row">asd2</div>
<div class="row">asd3</div>
<div class="row">asd4</div>
</div>
<div class="clear"></div>
</div>
Here is my jsfiddle: http://jsfiddle.net/vullnetyy/pshao68g/
What I want to do here is:
the red div must be exactly as wide as the 3 blue divs in its first row
the red div must be centered within the green div
javascript must be avoided
no static width may be set to the red or green divs (because this is supposed to be responsive, and an arbitrary number of blue divs may be provided)
First of all, if you want to center an Element you need to make it:
display: block;
width : %/px;
margin-left: auto;
margin-right:auto;
If you want the 3 blue divs to be inside of the red div and to be exactly 3 blue = 1red width, give each blue 33.333% width.
such as in this example: https://jsfiddle.net/vullnetyy/pshao68g/
Theres two conflicting issues here.
1)You must have a set width in order to do margin-left/right auto.
2)If you float to try to match child width you cant do margin auto. Now I know you didnt put float left on inner. But you did do display:inline-block which has float left and a few other rules attached.
In this particular case, you have to compromise just a little to get the results you want. Simply set .inner to the same as the row aka 250px since we know thats how large the child will be, and remove display:inline-block and PRESTO!
try this for to your inner and see what happens.
.inner{
width: 250px;
margin: 0 auto;
background-color: red;
}
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.
I have 3 divs, 'left div', 'right div' and 'bottom div'. I have been hopelessly trying to position them in a certain way but it just doesn't work. This is how I would ideally like them to be:
The main problem is the fact that 'left div' and 'right div' are of different heights so how would I sort this mess out?
EDIT: I would also like to add that the left and right divs need to be centered within the content area.
<div id="content">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>
css:
#content{
width:1000px;
margin:0 auto;
}
.left{
width:495px;
float:left;
margin-right:10px;
}
.right{
width:495px;
float:left;
}
.bottom{
clear:both;
margin-top:10px;
}
then if you want the left and right to match:
(using jquery)
$(document).ready(function(){
var leftdiv = $('.left').height();
var rightdiv = $('.right').height();
if(leftdiv > rightdiv)
$('.right').css('height', leftdiv + 'px');
else
$('.left').css('height', rightdiv + 'px');
});
Statically set their heights or use javascript to match them if the height is dynamic based on content.
Here's the HTML for the divs, remove the #container if you don't want to center them:
<div id="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="bottom">Bottom</div>
</div>
Here is the CSS:
#container {
width: 200px;
margin: 0 auto;
}
.left {
float: left;
width: 100px;
background: silver;
}
.right {
float: right;
width: 100px;
background: red;
}
.bottom {
clear: both;
background: aqua;
}
I just used the colors to highlight the position. You can of course change the widths of the divs, but remember that the #container width has to be the width of .left + .right.
Read this to find out more about floats.
You can find a demo of the code here: http://jsfiddle.net/teaJb/
float the left and right div's to their respective directions. set identical padding right and left on the containing div. on the bottom div apply "clear:both" to clear the float and "margin:0 auto" to center it relative to the container.
if you don't match the heights, obviously the bottom div would appear after the higher div. you can match height using jquery's .height() method to compare the actual heights and set the higher value for both divs. Alternatively, you can just set a CSS rule for a constant height or a dynamic min-height.
<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