http://jsfiddle.net/55Ruh/9/. Red box doesn't get bigger even if I enter text.
<div class="box" style="background: red">
<div class="lefty">Text</div>
<div class="righty">Text</div>
</div>
.box {
background: red;
width: 229px;
color: white;
}
.lefty {
float: left;
}
.righty {
float: right;
}
http://jsfiddle.net/55Ruh/10/
Float causes the element to get out of the flow of the document.
on parent element:
zoom: 1; /* IE fix */
overflow: hidden;
You can solve this with a "clearing" div, a typical approach:
http://jsfiddle.net/apDU6/
The container collapese when it has only floats inside. You need to clear it to expand it:
<div class="box" style="background: red">
<div class="lefty">Text</div>
<div class="righty">Text</div>
<div class="clear"/>
</div>
.box {
background: red;
width: 229px;
color: white;
}
.lefty {
float: left;
}
.righty {
float: right;
}
.clear {
clear: both;
}
you can use the solution suggested by PeeHaa it does the trick
but for my experience you can simply set the container element's overflew to auto
it does the trick as well
Related
I need to put a sidebar on the left of the content.
I had this html:
<div class="sidebar"></div>
<div class="content"></div>
and I solved using:
.sidebar{
width: 280px;
float: left
}
.sidebar + .content{
margin-left: 300px
}
For this example: https://jsfiddle.net/VixedS/fcx2aLLa/
But now my that .content comes before the .sidebar,
<div class="content"></div>
<div class="sidebar"></div>
how can I obtain the same result just using css?
I don't want to loose the remaining space of the body for the width of .content with or without .sidebar.
So please remember that before saying to float the .content to right. Also, I don't know which page has a .sidebar.
This solution is very powerfull. Works for every browser, any device. Also a great way for responsive design and for a third column.
Update:
.container {
overflow:auto;
}
.sidebar {
width: 280px;
float: left;
background: #EEE;
margin-left: -100%;
}
.content {
float: left;
width: 100%;
}
.center {
margin-left: 280px;
}
.container > div:only-child > div.center {
margin-left: 0;
}
<div class="container">
<div class="content">
<div class="center">
Spaghetti
</div>
</div>
<div class="sidebar">
Pizza
<br /> Hobby
</div>
</div>
Do following way. Use float:right to sidebar and display:table to it's parent.
body {
display: table;
}
.content {
float: right;
}
.sidebar{
width: 280px;
float: left;
background:#EEE; // just for this example
}
.sidebar + .content{
margin-left: 300px
}
<div class="content">Spaghetti</div>
<div class="sidebar">Pizza <br /> Hobby</div>
Flexbox...means you don't have to use floats...and you can re-order the elements as you require.
Support is IE10 and up.
body {
display: flex;
}
.sidebar {
width: 280px;
background: #aaa; // just for this example
order: 0;
}
.content {
flex: 1;
order: 1;
background: plum;
}
<div class="content">
Spaghetti</div>
<div class="sidebar">Pizza
<br />Hobby</div>
I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want:
This is the HTML code:
<body>
<div class="div1">Div1</div>
<div class="div3">Div3</div>
<div class="div2">Div2</div>
</body>
This is the CSS I have right now:
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
}
div.div3 {
height: 425px;
overflow: hidden;
}
div.div2 {
clear: left;
float: left;
height: 15px;
margin-top: 10px;
}
The only problem is that Div2 top position is affected by the height of Div3 and I get something like this:
Try this:
<html>
<head>
<style>
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
background-color: blue;
}
div.div2 {
clear: left;
float: left;
height: 15px;
width: 200px;
margin-top: 10px;
background-color: red;
}
div.div3 {
height: 425px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">Div1</div>
<div class="div2">Div2</div>
<div class="div3">Div3</div>
</body>
</html>
Once I re-ordered the Divs and added a width for Div 2 it works fine
https://jsfiddle.net/6g7qx26b/
This also works if you replace the css height properties with min-height properties, allowing for greater flexibility. Widths may also be specified in percentages
now you can use the right content with overflow:hidden and not conflicting with the left divs.
Check this:
http://jsfiddle.net/6UyTr/1/
div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }
Check it on http://jsfiddle.net/cz2fP/
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
Grouping the left div element by another div element.
div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;
}
div.div2 {
height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
And see this link http://jsfiddle.net/bipin_kumar/cz2fP/3/
<style>
div.left{
float: left;
}
.main{
width : 100%;
}
.clear{
clear : both;
}
div.div1, div.div2 {
margin-right: 10px;
width: 200px;
background: red;
}
div.div1 {
height: 400px;
}
</style>
<body>
<div class="main">
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
<div class="clear"></div>
</div>
</body>
http://jsfiddle.net/rkpatel/qd6Af/1/
I needed something similar, just mirrored (1 div left, 2 divs right) and I couldn't work it out. A few Google searches later, I found a website which easily allows you to create a grid, assign number of rows/columns to differently named divs and it even gives you the HTML/CSS code to just copy and paste it. I didn't know about this and wasted a good hour on trying various other ways, so if you didn't know about this website yet, here it is.
Sorry for replying to such an old thread, I just want to help people.
Try this
<body>
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
</body>
DEMO
<div class="main">
<div class="div1">
<div class="div2"></div>
<div class=="div3"></div>
</div>
<div class="div4"></div>
</div>
and in css use min-height property
.div1 {
float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}
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
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.