Take a look at this Fiddle.
I'm puzzled as to why #wrapper doesn't expand to accommodate the divs inside it. What's missing here?
As a side note, any idea as to why my <hr> isn't displaying properly?
The wrapper doesn't expand because the items inside are floating and taken out of the natural flow of the document.
You can tell the wrapper to expand past the floating elements by adding a block level element to the end of the wrapper and telling it to clear all floats:
#wrapper:after{
content:".";
display:block;
clear:both;
visibility:hidden;
}
Also, you had the height of the wrapper set to 100px.
Here's an updated version of your fiddle: http://jsfiddle.net/kWJ79/9/
As for your hr, what exactly are you wanting to do? It looks like you're wanting to create a vertical bar between the 2 divs. Is this correct?
UPDATE
If you're wanting to create a line between the left and right divs I'd consider a slightly different route.
What I'd do is put the left div inside its own container which has a right padding, margin and border. This way you don't have a redundant div floating around in your code and recudes the need to use a hr.
Here's an updated fiddle with this example: http://jsfiddle.net/kWJ79/15/
#left_wrapper{
margin-right:5px;
padding-right: 5px;
border-right:1px solid red;
float:left;
}
Notice that I've removed the float:left; from the #left div and placed it on the #left_wrapper instead.
You have specified the height value.
Related
I am designing a website with two floating columns which I want to fill the whole screen.
#column_main{
position:relative;
background:#ffffff;
float:left;
width:70%;
height:auto;
min-height:550px;
}
#column_side{
position:relative;
background:#dbdada;
float:left;
width:30%;
height:auto;
min-height:550px;
}
if I had the line below to #column_main
border-left:solid 1px #c0c1c4;
The float messes up and they are no longer side by side.
In IE I have been able to fix the problem by setting the #column_main width to auto and it fills the rest of the page. This doesn't work in firefox and I have tried reducing the percentage slightly but that leaves a gap between the #column_main and the right edge of the page. Is there a way to have the 1px border on the left and make the float fill the remainder of the screen.
The float no longer works because of the box model where the border is added to the width instead of included in the width, you have already used up 100% of the width by doing width:70% and width: 30%.
If you plan on applying a border you might want to apply it to a child element inside one of the wrapping floated columns and use those parent columns only as a grid system to structure your other content.
Alternatively try bootstrap grids
add box-sizing: border-box; to #column_main
This property basically says you want the box size to apply to the border and everything inside it.
This blog post explains this, and some other options to fix this particular problem.
Here is jsfiddle example
Here is the code..
<div id="xxx1">
<div class="xxx1">
txt
</div> </div>
And CSS
#xxx1{
border:1px solid black;
min-height:25px;
}
.xxx1{
border:1px solid green;
height:50px;
position:relative;
top:-50px;
}
I want to remove extra space from div id "xxx1". How to do that? And I cannot use fixed height cause I want that div to increase its height if I want to add some more data inside that div.
Here is jsfiddle example
Provided I understood the question, get rid of padding on body.
jsFiddle
body {
margin:0;
}
You may also find box-sizing:border-box useful which integrates border and padding into width and height
jsFiddle
#xxx1{
box-sizing: border-box;
}
.xxx1{
box-sizing: border-box;
}
Edit
RE: no.. I want to remove blank space inside div id "xxx1".
Well you can do that in a variety of ways, the right way would depend on what the context is. Here are a couple:
Position .xxx1 using position:absolute so it's taken out of the flow of the page. jsFiddle
Set height:0px and set it with JavaScript when you add content to it.
Here try to change it like this
.xxx1{
border:1px solid green;
height:auto;
position:relative;
}
you cant remove the spacing added by relative positioning. setting the padding and margin on the body wont do it. setting the box-sizing wont do it. setting the font size to 0 wont do it. doing something with javascript is just silly.
You have these options:
make the next item have a negative margin (ick).
float the item, tho this wont allow overlapping (if you need that)
set the outer div to a relative position and the item you want to move to absolute position (and set the top (or bottom) and left (or right) values. this positions the item you want to move according to its outer div (not the window).
Number 3 is almost always the best way to go. Think about how the page will change with variable content to make sure you choose the right option (and correct corner to position from).
If the outer div that you set to a relative position is not adjusted in space (using top/bottom/left/right), then that div does not have any extra unwanted space. If you need to adjust the outer div AND the inner div, set all moving divs as absolute, and the closest parent as relative; the movement (top/bottom/right/left) will be based on that relative parent.
I have horizontally stacked divs using the following code below:
.basic {
width:100px;
position:relative;
display:inline-block;
border: 1px solid red;
text-align:center;
margin:0;
padding:0;
}
#container {
white-space: nowrap;
border: 1px solid black;
width:300px;
overflow:auto;
}
The 'container' has white-space:nowrap for stacking it's children horizontally. However, the horizontal children have spaces to their right. Here's a fiddle showing the demo. Inspecting box layout there doesn't seem to be any margin/padding. But just some mysterious 'dark matter' pushing it out :P
The queer thing is that the same code is used at different places in my application but this anomaly shows up in one place as shown in the image below:
Don't worry about the garbled text on the top. I haven't rotated the div 90 degrees CCW as yet :)
However, pay attention to the bottom part of the image. The textbox divs are stuck to each other whereas the ones on the top aren't. They use the same CSS as above, but differ in structure. The top Div has two floats which are cleared by the div with the arrow towards the bottom. So no 'uncleared' floats there. Rather than posting the entire HTML/CSS I recreated the problem in the fiddle.
What I fail to understand is that even after having 0 margin/padding and display:inline-block for the child divs why is there still some space? I'm sure this has been asked quite a few times here but why would this happen once and not in another place? Besides, how best to 'fix it'??
display: inline-block places a margin to the right if there exists a whitespace between the current and the next element. This space is calculated as a product of 4px and the current font-size in ems. Notice the difference between the first and second rows in this fiddle: http://jsfiddle.net/MkasM/
In your case, this can be controlled simply by setting margin-right: -4px since you haven't changed the font-size.
More here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Also, it is good practice to give your elements 'box-sizing: border-box' if you haven't already. It will contain the 'padding' and border-widths within the blocks so it wont interfere with the layout.
To read: http://paulirish.com/2012/box-sizing-border-box-ftw/
I'm trying to make a div assume 100% of it's parent div. The parent div acts as a page wrapper, so it's already assuming 100% of the page width. I've tried adding width: 100%, but this did not seem to work. I'm a little baffled, because this seems like a relatively simply thing to do.
Don't specify a width at all. For a div element (or any block level element for that matter), this will make it assume 100% width regardless what padding/margin settings it has set.
Depending on the box model, explicitly setting 100% width can actually make the element too wide because paddings are calculated into it.
If this doesn't work, there is some other CSS setting interfering and you need to show more of your layout and HTML code.
display: block;
width: auto;
Should work for you.
You need to show more of your existing css code as normally, a div takes by default the whole space available to it, provided it has some content.
Other than that, make sure you set margin and padding of the parent div to 0.
.parent{
margin:0;
padding:0;
overflow:auto;
}
.child{
margin:0;
padding:0;
}
This page I have is super simple, this should be a breeze but I'm stumped.
I have two DIVs, one inside the other. In the first DIV, I have the margins set so that it lays at the top of the page, centered. The second DIV should lay inside the first, centered, but with a 50px margin at top. However, the 50px margin is being applied to the parent DIV and not the child. If I add a border to the parent DIV, it behaves like I expect it to, but not without.
Can anyone offer me any insight to this? Thanks in advance.
<div id="pageWrapper">
<div id="mainWrapper">
<p>foo</p>
</div>
</div>
*{
margin:0px;
padding:0px;
}
body{
background-color:#034375;
}
#pageWrapper{
width:960px;
margin:0px auto 0px auto;
background:url('i/blue-gradient.jpg') top left no-repeat;
}
#mainWrapper{
width:500px;
margin:50px auto 0 auto;
border:1px solid #000000;
background-color:#eeeeee;
}
This issue has to do with the CSS spec on rendering adjacent margins. Essentially, because there's nothing "in between" the margins of the containing div and the margins on the inner div, the larger value is used for both.
You'll see this mainly in Firefox, and although the behavior seems to follow the letter of the law, I'm not sure this particular case behaves as intended by the spec writers.
Fortunately, it's easy to fix -- put something "between" the margins. You've already noticed that putting a border on the parent div works. You can make this border transparent, and reduce the inner margin by 1px, and it will appear functionally the same as your above case. Another option is to apply one pixel of padding-top to the parent div. A third option is to use padding-top: 50px on the parent div instead of applying a top margin to the child div.
More information on collapsing margins.
You don't say which browser you're seeing this in. For me it works as expected in Firefox. However, I suspect you're seeing the issue in Internet Explorer. This is probably because the inner div doesn't have hasLayout applied - this is usually the cause of IE styling bugs. Try adding zoom:1 to the mainWrapper CSS declaration and see if that works.
You probably want to set the padding of mainWrapper instead of margin.
padding:50px 0 0 0;
Check out this description of the box model to see how margins and padding differ.