I have a question which may seem very basic but it has been bugging me for quite some time.
My issue is with width percentages. Say I have a container div at 800px and 2 divs inside it that are both set to float:left and width 50%. This would make them side by side and fill up the container, however if I wanted to add a border to those inner divs, it would make them too big to fix inside the container side by side, and would make one drop below the other.
So my question is: Is there a sizing method for auto filling a container that takes borders into account without having to manually specify pixel width (in the case of the 800px container, each of the two div's inside with a 1px border would make each div 398px wide...)?
thanks
Yes there is method called box-sizing
write this:
.parent{
overflow:hidden;
width:800px;
}
.child{
width:50%;
float:left;
background:red;
border:2px solid green;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Check this http://jsfiddle.net/QevgD/
read this article http://www.quirksmode.org/css/box.html
But it's work till IE8 & above.
Related
I'm trying to use a div as a divider inside of another div and it's not showing up. I figured if I set the height on the divider div to 100% it would automatically adjust to the height of the containing div, which I have set to "auto" for the height.
If I change the height of the containing div to an exact pixel amount the dividing div kicks in and works fine. The reason I want it to adjust automatically is because there will be multiple instances of the containing div with different content which will make the height vary from one to the other so just setting an exact pixel amount for all of them won't be sufficient.
Here's the CSS I created
.container{
width:600px;
height:auto;
margin:auto;
float:left;
display:block;
}
#divider{
width:4px;
height:100%;
float:left;
display:block;
}
Is my coding wrong or is there something else at play that makes this not possible? Thanks in advance for your assistance.
100% is relative to the parent. Try making it 100 vh. Codepen
#divider{
width:4px;
height:100vh;
float:left;
display:block;
}
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.
Im trying to align multiple Images or DIVs.
i get the content from wordpress.
#wrapper{
width:800px;
}
.image{
width:125px;
height:100px;
float:left;
margin-left:10px;
}
This causes the last image to go to the next line.
i found
#wrapper div:first-child{
margin-left:0px;
}
helps me with the first line but the next lines are "broken" again.
how can i align 6 images in a row with ^n Pictures?
That's indeed a common design problem. I used to fix it by adding 10px to the container, but nowadays I always use a jQuery fix:
$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0');
See jsfiddle here
Or you could do it CSS only, but this will only work in real browsers (not in <=IE8)
.image:nth-child(6n+1) {
margin-left:0px;
}
See jsfiddle here
Sounds like the total width of the images, padding and margin are too wide for your container width. Try increasing the container width to confirm this.
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.