I want to float a sidebar div to the right beside two stacked divs, both floated to the right.
You can find the code here:
http://jsfiddle.net/okcomputer82/ED4WJ/2/
I'm sure I can do this by grouping the left divs, but I would like to know if there is a cleaner way.
Thanks.
remove "clear: both;" from css class .left, and it will be ok.
NEW
update class .left to "clear:left;"
.left {
float: left;
clear: left;
background: yellow;
}
and put your right div to be at the first place like below
<div class="content">
<div class="right"></div>
<div class="left"></div>
<div class="left"></div>
</div>
example : http://jsfiddle.net/ED4WJ/5/
<div class="content">
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
</div>
css
.content
{
Float:left;
width:960px;
height:100px;
}
.left
{
float:left;
width:40%;
height:100%;
background-color:red
}
.right
{
float:left;
width:20%;
height:100%;
background-color:yellow
}
Related
If we inspect the code,you will see that the div.header has height: 0px;
Look at image below:
I want my div to be the size of three elements .c1,.c2 and.c3`
How can I solve this problem?
I hope as well that we managed to explain my problem.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
</div>
</div>
CSS:
.container
{
width:100%;
height:500px;
background:red;
}
.c1
{
width:auto;
height:auto;
background:yellow;
}
.c2
{
width:auto;
height:auto;
background:gray;
}
.c3
{
width:auto;
height:auto;
background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}
.header{width:70%;height:auto;margin:0 auto;background:blue;}
JSFiddle
Add overflow: auto(for example) css property to your .header class to recognize it's children's height.
JSFiddle
Use clearing divs.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
<div class='clearing'></div>
</div>
</div>
CSS:
.clearing {clear:both;}
I need to have three divs in a row and fourth div displayed below these divs.
See the layout http://i.imgur.com/k3TFW6b.jpg (just illustration)
I've tried to use display block for the parent div mixed with display inline/inline-block for these three divs and some other settings but it always breaks first row and displays these divs in block.
Do you have any idea how to fix this?
Thanks.
Instead of using display:inline on a div, a simpler solution might be using the float property in CSS. With the help of adding a width and height we can make complex layouts:
html, body{
margin:0; padding:0;
height:100%;
}
body{
background:#48c;
}
#container{
height:50%;
width:50%;
margin:auto;
}
.rect{ float:left; height:100%; }
#box1{ width:50%; background:#999; }
#box2{ width:25%; background:#666; }
#box3{ width:25%; background:#333; }
#box4{ width:100%; background:#000; }
<body>
<div id="container">
<div class="rect" id="box1"></div>
<div class="rect" id="box2"></div>
<div class="rect" id="box3"></div>
<div class="rect" id="box4"></div>
</div>
</body>
Simple and effective Solution would be CSS Table layout
HTML
.Row
{
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 7px;
}
.Column
{
display: table-cell;
background-color: gray;
}
<div class="Row">
<div class="Column">First</div>
<div class="Column">Second</div>
<div class="Column">Third</div>
</div>
<div class="Row">
<div class="Column">Fourth</div>
<div class="Column">Fifth</div>
<div class="Column">Sixth</div>
</div>
Basically, I want two different elements in the leftmost area of a div, and two for the rightmost area of a div.
However if I use float:left and float:right twice, I get the following:
ELEMENT ELEMENT
ELEMENT ELEMENT
rather than
ELEMENT ELEMENT
ELEMENT ELEMENT
This is because, when I float for the second time the css floats for the remaining space left.
How do I fix this bug?
You can use clear:both; with float:left; property.
Try Jsbin demo
.left {
float:left;
width:40%;
height:240px;
border:1px solid red;
}
.right {
float:right;
width:40%;
border:1px solid red;
height:240px;
}
.elem1 {
float:left;
margin-bottom:20px;
}
.elem2 {
float:left;
clear:both;
}
.elem3 {
float:left;
margin-bottom:20px;
}
.elem4 {
float:left;
clear:both;
}
<div class="left">
<div class="elem1">element 1</div>
<div class="elem2">element 2</div>
</div>
<div class="right">
<div class="elem3">element3</div>
<div class="elem4">element4</div>
</div>
What you need is a clear: both in your CSS.
Your floats are working fine, but there is not enough content to push the next elements below the first elements. If you set them to clear, then they will.
Try this one:
Markup:
<div class='clear:both'>
<!-- left container -->
<div style = "float:left;">
<div style = "float:left;">
Element
</div>
<div style = "float:left; clear:left;">
Element
</div>
</div>
<!-- right container -->
<div style = "float:right">
<div style = "float:right;">
Element
</div>
<div style = "float:right; clear:right;">
Element
</div>
</div>
Please use your own external style, this is just to guide you.
Please have a look here on jsfiddle
.wrapper {
height:100px;
border:1px solid red;
margin: 5px;
}
.left {
margin: 10px;
float:left;
width: 45%;
}
.right {
margin: 10px;
float:right;
width: 45%;
}
<div class="wrapper">
<div class="left">element 1</div>
<div class="right">element 2</div>
</div>
<div class="wrapper">
<div class="left">element3</div>
<div class="right">element4</div>
</div>
This works for me.
.right {
float:right;
}
.left {
float:left;
}
<div>
<div class="right">1 element</div>
<div style="clear:both"></div>
<div class="right">1 element</div>
<div class="left">1 element</div>
<div style="clear:both"></div>
<div class="left">1 element</div>
</div>
Here is the fiddle. http://jsfiddle.net/nQvEW/143/
I'm trying to align a few divs into this structure but nothing is working.
<div>
<div>top</div>
<div>middle
<div>left</div> <div>right</div>
</div>
<div>bottom</div>
</div>
Ive tried using floats with abosolutes, blocks, etc closest im getting is with block-inline but the div which i need aligned right just sits up close to the left div,ived add text-align right with no joy.
Many Thanks
D
try this
<div>
<div>top</div>
<div>
<div style="float:left;">left</div>
<div style="float:left;">right</div>
</div>
<div style="clear:both;">bottom</div>
</div>
the bottom div with clear:both is probably not enough but does the trick in this particular example
google clearfix for this
Give the left and right div a width and let them float
Make sure you also clear the float by adding an extra div below with: clear: both;
Code:
<div id="wrap">
<div id="top">top</div>
<div id="mid">
<div id="left">left</div>
<div id="right">right</div>
<div class="clear"></div>
</div>
<div id="bot">bottom</div>
</div>
CSS:
div {
background: #ccc;
height: 15px;
margin-bottom: 10px;
}
.clear {
clear: both;
}
#wrap {
width: 400px;
}
#top {
}
#mid {
}
#left {
float: left;
width: 200px;
}
#right {
float: left;
width: 200px;
}
#bot {
}
See code in action: http://jsfiddle.net/GZg6y/
you can do this in different ways, one through float css property, make sure you specify the width as in this example:
<div class="container">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div> <div class="right">right</div>
</div>
<div class="bottom">bottom</div>
and your css should look like this:
.left{
float:left;
width:50%;
background:green;
}
.right{
float:right;
width:50%;
background:blue;
}
.bottom{
clear:both;
}
see here http://jsfiddle.net/M3met/1/
Previously, I was using <table> to split up my page layout into 3 parts, the left sidebar, right sidebar & the main centre panel. Now, after having learnt the disadvantages of overusing/misusing <table>, I want to avoid using tables for this purpose & I am looking to style these 3 divs in such a way that they look like 3 columns of a <table> row.
Any inputs on how I can achieve the 3 divs in same row, would be highly appreciated.
Currently my all the three div s are shown in linearized fashion, one after another.
Maybe something easier, what about:
HTML:
<div id="main">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
CSS:
#main{
margin: 0 auto 0 auto;
width: 960px; /*just an example*/
}
#main div{
float: left;
width: 320px; /* a third of the main width*/
}
I hope this will help you.
Typically sidebars have fixed width and the middel content area takes up the rest of the space. Considering that, here's the best approach:
<style>
#left {
width:200px;
float:left;
} #right {
width:200px;
float:right;
} #main {
margin:0px 200px;
}
</style>
<div id="container">
<div id="left">content</div>
<div id="right">content</div>
<div id="main">content</div>
</div>
Resize the window and all is well.
Working JSFIDDLE: http://jsfiddle.net/7ayqe/
Give them "float:left" properties and corresponding width to make it the size you want.
Example (I know these are inline styles, used for demonstration purposes only):
<div id="left-sidebar" style="width:30%;float:left"><!--Left Sidebar--></div>
<div id="content" style="width:50%;float:left"><!--Content--></div>
<div id="right-sidebar" style="width:20%;float:left"><!--Right Sidebar--></div>
Something like this should get you started:
<div>
<div class="column">column one</div>
<div class="column">column two</div>
<div class="column">column three</div>
<div class="last"></div>
</div>
.column { float: left; padding: 5px }
.last { clear: left}
Here is a live example
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="clear"></div>
CSS:
.col1 {
float:left;
width:250px;
}
.col2 {
float:left;
width:600px;
}
.col3 {
float:left;
width:20px;
}
.clear {
clear:both;
}