I have a container DIV with random number of children inside.
I always want children to fill 100% width of parent. I tried using do display:table-cell and other CSS tricks but all in vain.
Here is fiddle.
HTML
<div class="wrapper">
<div class="panel">1
</div>
<div class="panel">2
</div>
<div class="panel">3
</div>
<div class="panel">4
</div>
</div>
Add display:table to the .wrapper
http://jsfiddle.net/pA3fj/2/
Related
I'm really struggling with Bootstrap regarding the way it handles divs.
It seems to me, that all column classed divs using Bootstrap CSS are floated. For example:
<div class="col-md-3">
property
</div>
This above div has the style: float: left; as defined in Bootstrap CSS.
Now everyone knows about the issue with floating, it causes the parent div to not expand to the height because it doesn't 'see' floated elements as pushing out the container.
I feel like this is a serious flaw in Bootstrap. I have some classes to add margin to divs, for example:
.full-buffer{margin:20px 0}
If I want to use this class on a div that wraps a number of Bootstrap columns, it doesn't work. Because the div has no height. If I wanted to add a background colour, it won't show up. For example:
.background-coloured-div{background-color:#0F0;}
<div class="background-coloured-div">
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
</div>
The above won't show any background colour, because all of the divs inside are floated, so it'll collapse to 0px in height.
JSFiddle without bootstrap
JSFiddle with bootstrap - fixes one problem and causes another
So, what's the proper way to use Bootstrap columns? If everything is floated, how can you add proper margins, background colours etc to parent divs? Isn't this a massive flaw of the whole system?
Bootstrap has a row class that contains the floats using:
.row:before {
display: table;
content: " ";
}
.background-coloured-div {
background-color: #0F0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="background-coloured-div row">
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
</div>
You'll want to wrap those cols in a .row div to contain the floats.
Don't forget to also contain that row in a .container or .container-fluid to counter balance the -15px margin applied to .row.
<div class="container-fluid">
<div class="background-coloured-div row">
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
</div>
</div>
http://getbootstrap.com/css/#grid-example-fluid
If for whatever reason you don't want to use a .row, you could add the following to your css to contain the floats of that divs children, but I recommend using Bootstraps solution:
background-coloured-div:after {
content:'';
display:table;
clear:both;
}
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
In your case, the code should be:
<div class="container-fluid">
<div class="row background-coloured-div">
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
<div class="col-md-3">
property
</div>
</div>
</div>
Im trying do this
<div>
<div style="width:50%;"> first div </div>
<div style="width:50%;"> second div </div>
</div>
Sometimes dynamically first or second div will not be displayed.
when first div is not displayed i need second assume width 100% and vice versa.
Can i do this just with css? min-weigth or max-width or something like that?
You can use :only-child pseudo class
.childDiv
{
width:50%;
}
.childDiv:only-child
{
width:100%;
}
HTML
<div>
<div class="childDiv'> first div </div>
<div class="childDiv'> second div </div>
</div>
Try using the auto margin CSS properties:
.myClass
{
margin:0px auto;
width:50 //You can set this to whatever or take it out
}
And add to HTML
<div>
<div class="myClass'> first div </div>
<div class="myClass'> second div </div>
</div>
I have nested divs, with most being float:left; display:block;, like do:
<div class="container" style="display:block;">
<div style="float:left; display:block; height:100px;">
<div style="float:left; display:block; height:100px;">
</div>
I want the div container to get bigger without setting a height. At the moment it's a flat line.How do I set up the inner divs, so that the container has a height?
TL;DR: Currently I can see the 2 inside div's fine, but the container is a flat div (no height).
How do I give it a height?
You have two options:
<div class="container" style="overflow:hidden">
<div style="float:left; height:100px;">
<div style="float:left; height:100px;">
</div>
or
<div class="container">
<div style="float:left; height:100px;">
<div style="float:left; height:100px;">
<div style="clear:left">
</div>
Note that overflow:hidden elements will wrap around floating inner elements. Alternatively, you can use an element to clear the float, which will also make the surrounding element to wrap it's content.
Another tip: You don't have to state that divs are display:block. In HTML, there are basically 2 types of elements, block and inline. Divs are block by default.
Add overflow:hidden to that DIV.
Let's say I have a this markup:
<div id="container">
<div id="header">content</div>
<div id="left-column">content</div>
<div id="right-column">content</div>
<div id="footer">content</div>
</div>
The #container is centered and fixed at 1000px, #header and #footer are 1000px, and #content-left and #content-right are floated left, at 500px each.
How do I extend the header and footer background colors the full length of the browser window if the container is fixed?
First, change a little your html structure. While you're there, why not using html5 for header and footer elements.
Html
<header>
<div class="container">
content
</div>
</header>
<div class="container">
<div id="left-column">content</div>
<div id="right-column">content</div>
</div>
<footer>
<div class="container">
content
</div>
</footer>
Css
Than, in the Css, set the header and footer width to 100% and make them de color you want. In this example red. Than use a class .container that will make the content wherever you put it (header, main section, footer) display in the middle of the screen, but without any background color.
header, footer{display:block; width:100%; background:#ff000; margin:0; padding:0;}
.container{width:1000px; margin:0 auto;}
Hope this help :)
The header and footer divs need to be outside the container div.
Apply the background colour to a wrapper around the header/footer.
html
<div id="header-wrapper">
<div id="header">content</div>
</div>
<div id="container">
<div id="left-column">content</div>
<div id="right-column">content</div>
</div>
<div id="footer-wrapper">
<div id="footer">content</div>
</div>
css
#header-wrapper{width:100%;height:xxx;background:#3399ff}
#header,#footer{width:1000px;margin:0 auto}
The accepted answer is really a bad way to accomplish this. HTML is used for semantic meaning of the content. Removing your header from your container is not semantic! Here's a much better way of doing this that still preserves the semantic content: http://css-tricks.com/full-browser-width-bars/.
I have one div that has a dynamic height and another div that is a float. Is there a way in css I can link div2's height with the height of div1?
I think it's that you want : http://www.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
It's possible that you can wrap both divs in a 3rd div(wrapper) and then set the height of div2 to 100%
<div class="wrapper">
<div class="div1">
</div>
<div class="div2">
</div>
<div style="clear: right"></div>
</div>
.div2 { float: right; height: 100% }