As you can see from the code i'm using clear:both to allow me to place #three under #one #two but this seems to be stopping me from adding margin-top to #three is there a fix for this?
<div id="one">
</div>
<div id="two">
</div>
<div id="three" class="clearfix">
</div>
#one {
float:left;
}
#two {
float:right;
}
.clearfix {
clear:both;
}
#three {
margin-top: 20px;
}
As a workaround you may use
padding-top : 20px
or you may also technically use
position: relative;
top: 20px;
applied on #three div. Or even
padding-bottom: 20px;
applied on #two div. And even
#two:after {
content : "";
clear : both;
display : block;
height : 20px; // or margin-bottom: 20px;
}
Just choose the option that fits best for your layout
Apply float:left; to #three to fix your issue
Edit: Or follow Fabrizio and add padding if you don't want to float anything, but no need to use relative positioning.
Wrap #one and #two in a container with overflow:hidden;, and you won't even need the clearfix.
Demo
<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>
#container {
overflow:hidden;
}
#one {
float:left;
}
#two {
float:right;
}
#three {
margin-top: 20px;
}
Hi now change some code in you html and do this
<div style='overflow:hidden'>
<div id="one">Left</div>
<div id="two">Right</div>
</div>
<div id="three" class="clearfix">// your data </div>
Live Demo
This JSFiddle should help you
<div class="row">
<div id="one">
a
</div>
<div id="two">
b
</div>
</div>
<div id="three">
c
</div>
CSS
#one {
float:left;
}
#two {
float:right;
}
clearfix {
clear:both;
}
.row{ overflow: hidden; border: 1px solid red; }
#three {
margin-top: 40px; border: 1px solid green;
}
You need to apply the clear: both; to the #three div.
Then it will be like this: http://jsfiddle.net/uJBK2/
EDIT
Now I see you're just missing a point before clearfix. Nevermind.
Related
I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!
Any help would be appreciated, thank you! :)
Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
It's already working for the snippet you showed. I just put a background color on the div.form so you could see.
In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.
Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
You can also place 2 divs side by side using display:inline-block on the two divs.
(If you want it responsive, define the width of the child with % and not pixels.)
.child1 {
background:#082a46;
}
.wrapper {
border: 1px solid #ccc;
}
.blurb {
color: #fff;
background-color: blue;
width:200px;
height:400px;
display:inline-block;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
display:inline-block;
}
<div class="child1">
<div class="wrapper">
<div class="blurb"></div>
<div class="form"></div>
</div>
</div>
<div class="row">
<div class="column fixed"></div>
<div class="column flexible"></div>
<div class="column fixed"></div>
</div>
Where .column.fixed are both of a fixed width and column.flex is the full width between those.
The only way I know is using positioning, but I'm wondering if it can be done using display: table-cell.
Codepen: http://codepen.io/bernk/pen/leCxm
Clean and responsive. Pure CSS. No messing with display property.
<div id="layout">
<div class='left'></div>
<div class='right'></div>
<div class='center'></div>
</div>
<style>
.left {
width: 20%;
float:left;
background: red;
}
.right {
width: 20%;
float:right;
background:blue;
}
.center {
margin:0 auto;
width: 60%;
background:green;
}
</style>
Fiddle: http://jsfiddle.net/N75Rn/
As you note, you could use display:table
option 1: display:table
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>fit content</div>
<div class='cell'>expand content</div>
<div class='cell'>fit content</div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
width:1%;
border:1px solid black;
height:10px;
}
.cell:nth-child(2) {
width:100%;
}
option 2: floats
....or, you can use floats
Demo Fiddle
HTML
<div></div>
<div></div>
<div></div>
CSS
div {
border:1px solid black;
height:10px;
}
div:nth-child(1) {
float:left;
width:40px;
}
div:nth-child(2) {
float:right;
width:40px;
}
div:nth-child(3) {
overflow:hidden;
}
I like to do this kind of layout with position: absolute on the fixed-width elements and a padding value on their parent equal to their width.
It has an advantage in RWD/SEO since the order of the columns doesn't matter. Also, the contents of the flexible element won't leak out below the fixed-width elements when the flexible element is higher than them, which may or may not be desirable depending on your design.
The disadvantage to this is that the fixed-width elements are taken out of the content flow, meaning you may have to, somehow, compensate for their height if they're higher than the flexible element and if that breaks the layout.
Example:
HTML:
<div class="row">
<div class="column fixed fixed-left"></div>
<div class="column flexible"></div>
<div class="column fixed fixed-right"></div>
</div>
CSS:
.row { padding: 0 150px; }
.fixed {
position: absolute;
top: 0;
width: 150px;
}
.fixed-left { left: 0; }
.fixed-right { right: 0; }
Here's a pen with this.
I need 3 column layout, first and 3rd column sizes are variable because there will be image or some variable length text(or another image) but i need middle to fill the rest space with background image, something like this if it would work like i imagine :
HTML:
<div class="left-vp">
<img src="~/Content/images/vp1.png" />
</div>
<div class="mid-vp">
</div>
<div class="right-vp">
<p>
//some text here or another img
</p>
</div>
CSS
.left-vp {
float: left;
}
.mid-vp {
height: 2px;
background: #FFFFFF url("images/dot.png") repeat-x;
width: 100%;
}
.right-vp {
float: right;
}
Is something like this possible with CSS?
If you have control of the markup, and don't mind making changes, you can use table block styles to accomplish this. It's the only way I know of which will handle all scenarios and resizing.
HTML
<div class="container">
<div>
<div class="col col1">
<div class="nowrap">Column 1</div>
</div>
<div class="col col2 fill center">
<div class="nowrap">Column 2</div>
</div>
<div class="col col3">
<div class="nowrap">Column 3</div>
</div>
</div>
</div>
CSS
.container { width: 100%; }
.container { display: table; }
.container > div { display: table-row; }
.container > div > div { display: table-cell; }
.container > div > div { padding: .5em; }
.container .nowrap { white-space: nowrap; }
.container .fill { width: 100%; }
.container .center { text-align: center; }
.col1 { background: red; }
.col2 { background: blue; }
.col3 { background: green; }
In action: http://jsfiddle.net/Vxc3n/1/
A few things to keep in mind:
If your first and 3rd columns contain text, you will need to wrap them in a DIV which has the white-space: no-wrap CSS style
If you have more than 1 fill column, ensure the width total = 100% (eg, 2 columns, use 50%)
You won't be able to shrink the columns beyond the minimum required width
HTML
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS
#container{width:100%;}
#left{float:left;width:100px; height: 100px; background-color: gray;}
#right{float:right;width:100px; height: 100px; background-color: green;}
#center{margin:0 auto;width:100%; height:100px; background-color: blue;}
in action -> http://jsfiddle.net/5xfR9/39/
I'm not sure what your actual requirements are for that central column but if it's just to contain a background as in the question could you not move the background styles to the container itself?
As an expansion on Eriks' jsfiddle: http://jsfiddle.net/5xfR9/46/
HTML
<div id="container" class="clearfix">
<div id="left">some text</div>
<div id="right">some text</div>
</div>
CSS
#container{ width:100%; background-color: blue; }
#left{ float:left; height: 100px; background-color: red; }
#right{ float:right; height: 100px; background-color: green; }
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
I've added a clearfix class to make sure the container actually contains the columns so that the background can show through (this is the clearfix class from a version of HTML5 Boilerplate).
You just need to play around with min-width and max-width properties until you get what you want. And it seems to work easiest when you give the columns a max-width as a percentage of the body or a wrap.
Here is a working example i put together:
http://jsfiddle.net/76Ep3/1/
HTML
<div id="wrap">
<div id="left">LEFT content...</div>
<div id="center">CENTER content...</div>
<div id="right">Right content</div>
</div>
CSS
*{margin:0;padding:0;}
body, html{
height:100%;
}
#wrap {
min-width:390px;
height:100%;
}
#left{
float:left;
min-width:100px;
max-width:37%;
margin:0 auto;
background-color:blue;
height:100%;
}
#center {
float:left;
min-width:100px;
max-width:20%;
background-color:red;
height:100%;
}
#right {
float:left;
min-width:100px;
max-width:37%;
background-color:yellow;
height:100%;
}
This is the layout i want,
I made some with code, but i'm not sure how to do after this.
[html]
<div id="content">
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
[css]
#content{
/* the width in here will be changed
width: this requirment will be changed
i dont' want to type my left, right content static
is there a way? */
}
#left{
float:left;
width: 50px;
}
#right{
float:left;
width: 50px;
}
#bottom{
/*what do i have to do in here?
float:*/
}
You could do something like this:
Set clear:both on #bottom. Add width:50% to both #left/#right.
Finally, specify the borders on the elements and add box-sizing in order to include the borders in the element's width calculations.
jsFiddle example
#content {
border:1px solid black;
}
#content > div {
height:100px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#left {
float:left;
width: 50%;
border-right:1px solid black;
}
#right {
float:right;
width: 50%;
}
#bottom {
border-top:1px solid black;
clear: both;
}
This is what you want for the bottom div:
#bottom{
clear: both;
}
For #bottom, you want float:left;width:100px; Just try that, see if it works.
You could also try using positions to do it, if you don't need the size of them to change:which it looks like you don't. For example:
#Left {width:50px;height:50px;position:absolute;left:0px;top:0px;}
#Right {width:50px;height:50px;position:absolute;left:50px;top:0px;}
#Bottom {width:100px;position:absolute;left:0px;top:50px;}
I feel much more confident the second will work.
Here is how I would do it personally: http://jsfiddle.net/T5fW3/
<div id="content">
<div id="top">
<div id="left">
<div class="container"> Left </div>
</div>
<div id="right">
<div class="container"> Right </div>
</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
I use a container so that if you want to add styles (border, margins, padding etc) they don't mess up the 50%. You can now resize content to whatever size and your proportions will still be the same.
#content{
/* the width in here will be changed
width: this requirment will be changed
i dont' want to type my left, right content static
is there a way? */
}
#left{
float:left;
width: 50%;
}
#right{
float:left;
width: 50%;
}
#bottom{
border: 1px solid black;
clear: both;
}
.container {
border: 1px solid black;
}
the border in the container class and bottom id is there just for illustration. If you were to add the border to #left or #right your layout will break. Notice also, I use 50% instead of 50px.
Hi I want to achieve the following:
The following code works but I'm not sure if position: absolute for left upper "Name" is the wise way to do it or should I use float ?
Here is the html
<div class="bodyframe">
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
And the css
![.bodyframe {
}
.upperbodyframe{
}
#leftupperbodyframe{
text-align:left;
border: 1px solid ;
position: absolute;
}
#rightupperbodyframe{
text-align: right;
}]
i would use floats here. there's really no reason for the position:absolute here as well.
.upperbodyframe {overflow:hidden} /* or div will collapse with only floated elements inside */
#leftupperbodyframe {float:left; border: 1px solid ;}
#rightupperbodyframe {float:right;}
You can do this with two method.
First Method
.upperbodyframe{
width:100%;
position:absolute;
}
#leftupperbodyframe{
position: absolute;
left:0px;
}
#rightupperbodyframe{
position: absolute;
right:0px;
}
.clear{
clear:both;
}
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
Second Method
.upperbodyframe{
width:100%;
}
#leftupperbodyframe{
float:left;
}
#rightupperbodyframe{
float:right;
}
.clear{
clear:both;
}
<div class="upperbodyframe">
<div id="leftupperbodyframe">Name</div>
<div id="rightupperbodyframe">Name 2 Name 3</div>
</div>
Thanks,Arun Krishnan