Given the following
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
(See: http://jsfiddle.net/ericjohannsen/JCPEH/1/)
Why does container apparently not have any area (that is, it has a zero height, plus the border)? I naively expected it to be as tall as the child divs that it contains.
What is the proper way to set this up so that the div containing the two children is as tall as the children?
You need to clear your floats. You can do this via a clearfix class:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container' class="clearfix">
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
or a clearing element:
.clear {
clear:both;
}
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
<div class="clear"><!-- --></div>
</div>
Updated Fiddle:
http://jsfiddle.net/JCPEH/5/
This is because floats are not part of the layout until they are cleared.
A float like some other "commands" (like position relative/absolute/fix) removes the element from the normal rendering flow.
One result, it is no longer affecting it's parent element way of rendering.
You can enlighten yourself here
before closing the big div add a <div id="clear"></div> and in css add #clear{clear:both;}
Set the position to absolute for the container, that fixes the problem. http://jsbin.com/ifojug/1/ jsfiddle doesnt work on my browser for some reason
Related
I have a 'frame' containing two divs which are respectively aligned on the left and on the right. Unfortunately, the main div does not have the proper height to englobe the inner divs.
Here is the HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
</div>
and the CSS:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
float: left;
}
#b {
background: green;
float: right;
}
Here is the JsFiddle: http://jsfiddle.net/mPH4H/
I should see a red frame, but there is none.
The floated elements are removed from the flow of the document, so the parent container thinks that it has nothing inside of it. You can add overflow:auto to your CSS rules for #frm to bring the background back and "contain" the floated children:
#frm {
background: red;
width: 100%;
height: auto;
overflow:auto;
}
jsFiddle example
overflow:hidden; will give height to #frm
Try:
#frm {
background: red;
width: 100%;
height: auto;
overflow:hidden;
}
DEMO here.
OR
Clear floats:
HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
<div class="clr"></div>
</div>
CSS:
.clr{clear:both;}
DEMO here.
i think this is worked as fine:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
width: 50%;
float: left;
}
#b {
background: green;
width: 50%;
float: right;
}
I have 3 DIVs: 1. suiteBar, 2. ribbonMain, 3. ribbonSub
I like to display the DIVs in the following way:
DIV1 (suiteBar) : right (without a specific width)
DIV2 (ribbonMain) : left in the same line with DIV1 (width: 100%)
DIV3 (ribbonSub) : under DIV1+DIV2 over the full width from both DIVs
Is that possible? Everytime when I give my DIV2 a width from 100% it makes a 'line Break'... See my example on fiddle and code here:
http://jsfiddle.net/dkHZS/
#topHeader {
display: block;
}
#suiteBar {
background-color: Aqua;
float: right;
display: inline;
}
#ribbon {
background-color: Lime;
float: left;
display: inline;
width: 100%;
}
#ribbonSub {
background-color: Gray;
}
<div id="topHeader">
<div id="suiteBar">suiteBar</div>
<div id="ribbon">ribbonMain
<div id="ribbonSub">ribbonSub</div>
</div>
</div>
Don't float the ribbon div:
#suiteBar {
background-color: Aqua;
float: right;
}
#ribbon {
background-color: Lime;
}
http://jsfiddle.net/dkHZS/4/
Also, when you float an element, it becomes a block element, so setting it to inline won't matter.
Use overflow:hidden on the right div: http://jsfiddle.net/dkHZS/6/
You could do something like this:
<div id="left">
</div>
<div id="right">
</div>
<div id="bottom">
</div>
CSS:
#left{
float:left;
width: 90%;
background: green;
height:20px;
}
#right{
overflow:hidden;
background: blue;
height:20px;
}
#bottom{
width: 100%;
float:left;
background: red;
height:20px;
}
Check this fiddle.
I use position.
This method also works good.
http://jsfiddle.net/hassaan39/NbX7P/
I need the following in a header of fixed width:
A div of varying width floated left.
A div of varying width floated right.
An h2 centered between them that takes up any remaining space.
The floated divs contain content that may vary in size.
I've tried various approaches but they have all failed. I know one solution is to absolutely position the outer divs, then stretch the h2 out for the full width and center the text so it sits centrally, but there must be a nicer way to do this.
A basic jsFiddle example with minimal markup.
HTML
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
<h2>H2</h2>
</div>
CSS
#container {
border:1px solid #999;
}
#left {
float:left;
}
#right {
float:right;
}
h2 {
text-align:center;
margin:0;
}
You could use display: inline-block instead of float, and then use CSS calc to get the right width for the middle div:
HTML:
<div id="wrapper">
<div id="one"></div><div id="two"></div><div id="three"></div>
</div>
CSS:
#wrapper {
min-width: 300px;
}
#one, #two, #three {
display: inline-block;
height: 300px;
}
#one {
background: lightgreen;
width: 100px;
}
#two {
background: lightblue;
width: 100%;
width: calc(100% - 300px);
width: -webkit-calc(100% - 300px);
width: -moz-calc(100% - 300px);
}
#three {
background: lightgreen;
width: 200px;
}
jsFiddle Demo
You can then put the h2 inside the the middle div, in this case #two.
Considering the following HTML:
<div id="parent">
<div id="left">Left</div>
<h2>Heading</h2>
<div id="right">Right</div>
</div>
CSS Code:
#parent {
width: 80%;
margin: auto;
display: table;
}
#parent div, #parent h2 {
display: table-cell;
}
#left, #right {
width: 50px;
}
Demo: http://jsfiddle.net/MAhmadZ/pMfLx/
try this out
i think it may solve your problem
<style type="text/css">
div{
display: inline-block;
vertical-align: top;
height: 50px;
border: 1px solid red;
position: static;
}
#one{
float: left;
width: 100px;
}
#three{
float: right;
width: 100px;
}
</style>
<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid red;">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<script type="text/javascript">
var spaceLeft = document.getElementById("one").offsetWidth;
var spaceRight = document.getElementById("three").offsetWidth;
var totalSpace = document.getElementById("outerDiv").offsetWidth;
document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>
I am trying to place two divs next to each-other on the same line, have a break and then have another full block div.
Here is what I have so far
body code
<body>
<div class="noFloat">
<div class="square bgBlue ltFloat">I'm Blue</div>
<div class="square bgGreen ltFloat">I'm Green</div>
</div>
<div class="dvCenter">I'm in the middle</div>
<div class="dvCenter">I'm in the middle</div>
</body>
css
body {
background-color: red;
}
.square {
width: 100px;
height: 100px;
}
.bgBlue {
background-color: blue;
}
.bgGreen {
background-color: green;
}
.dvCenter {
float: none;
margin: auto;
width: 300px;
background-color: purple;
}
.ltFloat
{
float: left;
}
.noFloat
{
display: block;
float: none;
}
I am very stuck as to why this won't work correctly. Any help is greatly appreciated :-)
By break I intended to have the two left floated divs sharing no horizontal space with the centered divs.
Change the .noFloat rule to
.noFloat
{
display: block;
float: none;
overflow:auto;
clear:both;
}
demo at http://jsfiddle.net/gaby/53vVP/1
Alternatively you can set clear:left; on the .dvCenter rule.
demo at http://jsfiddle.net/gaby/53vVP/
I have the following setup for a 3 column layout:
#column-menu {
float: left;
width: 25%;
}
#column-main {
float: right;
width: 55%;
}
#column-side {
float: left;
width: 20%;
}
This code works with the following html:
<div id="column-side">my right side content</div>
<div id="column-main">my main content</div>
<div id="column-menu">my sub menu</div>
I'm not committed to using floats. It just so happens that it works with the above structure, except for when nothing is in column-side. In that case I would like column-main to cover the additional width and not be constrained to 55%. Is there a way to build that kind of flexibility with CSS alone?
If you want to do it with floats, you will have to reorder your elements:
.column-side {
float: left;
width: 20%;
background: #00ffff;
}
.column-menu {
float: left;
width: 25%;
background: #00ff00;
}
.column-main {
overflow: hidden;
background: #ffff00;
}
<div class="column-side">Side</div>
<div class="column-menu">Menu</div>
<div class="column-main">Main</div>
<hr />
<div class="column-side"></div>
<div class="column-menu">Menu</div>
<div class="column-main">Main</div>
then in that case you want something like this:
if you remove <div id="column-menu" class="align">my sub menu</div> you will see how it works with proper fluidity.
.wrapper {
width: 100%;
display: table;
table-layout: fixed;
}
.align {
display: table-cell;
vertical-align: top;
width: 100%;
}
#column-menu {
width: 25%;
background: red;
}
#column-main {
width: 55%;
background: blue;
}
#column-side {
width: 25%;
background: green;
}
<div class="wrapper">
<div id="column-side" class="align">my right side content</div>
<div id="column-main" class="align">my main content</div>
<div id="column-menu" class="align">my sub menu</div>
</div>
A quick explanation of what's going on here:
you are using table-layout:fixed; it will automatically equally proportion the child elements with the relative css rule which in this case is display:table-cell;
Now because we don't want it to be equal we set the percentages but because of the fixed property when a div is removed the remaining two div's will just span proportionality and auto calculate what there widths should be to still take up the full width of the container.