I have a <div> horizontally centered that is 960px (width). I have have a second <div> at the right side and a third at the left Side.
I want the divs at the sides to take all available space minus the 960 px of the centered div. I succedded for the div at the right side (with overflow: hidden). But I failed for the div at the left side.
<div id="left">leftt</div>
<div id="center">center</div>
<div id="right">right</div>
<style>
#center{
width: 960px;
float: left;
height: 300px;
background-color: #bbb;
}
#left{
float: left;
height: 300px;
background-color: #ccc;
width: ?;
}
#right{
float: left;
height: 300px;
background-color: #ddd;
width: ?;
}
<style>
here is what i want.
http://i.stack.imgur.com/CgdLo.png
Use css tables (IE8 supports them - caniuse)
FIDDLE
1) Set display:table on container div
2) Set display:table-cell on child divs
3) Set min-width:960px on center div and width:50% on side divs
CSS
.container
{
display: table;
width: 100%;
}
#center{
min-width: 960px;
height: 300px;
background-color: #bbb;
display: table-cell;
}
#left{
height: 300px;
background-color: #ccc;
display: table-cell;
width: 50%;
}
#right{
height: 300px;
background-color: #ddd;
display: table-cell;
width: 50%;
}
In Modern browser(IE9+, firefox, chrome)
in Html:
<body>
<div id="left">leftt</div>
<div id="center">center</div>
<div id="right">right</div>
</body>
in css:
#center{
width: 960px;
float: left;
height: 300px;
background-color: #bbb;
}
#left{
float: left;
height: 300px;
background-color: #ccc;
width: 100%;
width: calc(50% - 480px);
}
#right{
float: left;
height: 300px;
background-color: #ddd;
width: 100%;
width: calc(50% - 480px);
}
In IE8 Use JQuery:
<script>
$(function () {
var documentWidth = $("body").width();
$("#left").width((documentWidth - 960) / 2);
$("#right").width((documentWidth - 960) / 2);
});
</script>
Related
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
A simple problem today but can't seem to find the solution. I have four divs - I would like #down to be placed directly below #up, but for the life of my can't figure it out. Here is my CSS and HTML.
#up {
width: 33.3%;
height: 100px;
background: #CCCCCC;
float: left;
}
#down {
width: 33.3%;
height: 100px;
background: #999999;
float: left;
}
#mid {
width: 33.3%;
height: 200px;
background: #999999;
float: left;
}
#right {
width: 33.3%;
height: 200px;
background: #CCCCCC;
float: left;
}
<div id="up"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="down"></div>
Elements must remain floated left.
maybe try with an additional div to get both up and down together?
<div id="up_down">
<div id="up"></div>
<div id="down"></div></div>
<div id="mid"></div>
<div id="right"></div>
And you will changed your css to :
up_down{
width: 33.3%;
height: 200px;
}
#up {
width: 100%;
height: 50%;
background: #CCCCCC;
float: left;
}
#down {
width: 100%;
height: 50%;
background: #999999;
float: left;
}
Rather than working with floats, you might consider simply setting the display attribute of the middle divs to "inline-block". Remember that be default, div elements have a block display, which means that they take up the entire width of its parent element, even if its width is less than the parent width. inline blocks on the other hand fit together like puzzle pieces and flow horizontally rather than vertically.
As #isherwoord says in the first comment, wrap div#up and div#down together in another div, forexample div#column
(I hope you don't mind the HAML way of writing HTML.)
div#column
div#up
div#down
div#middle
div#right
If you know the heights/widths you can just set the top position of #down with position:relative;top:-100px; to pull it back up.
Example:
#up {
width: 33.3%;
height: 100px;
background: #CCCCCC;
float: left;
}
#down {
width: 33.3%;
height: 100px;
background: #999999;
float: left;
position:relative;
top:-100px;
}
#mid {
width: 33.3%;
height: 200px;
background: #999999;
float: left;
}
#right {
width: 33.3%;
height: 200px;
background: #CCCCCC;
float: left;
}
<div id="up"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="down"></div>
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result:
I want to position a <div> on a line, and then another <div> afterward.
I set the first <div> to float left, and then put in the next one.
However, the first div is covering the second one. It's not positioning the second one after the first (as I expected) - it's starting it from the same place.
Here's the code (on JSFiddle: http://jsfiddle.net/LcrA9/)
<div id="container">
<div id="one">
</div>
<div id="two">
</div>
</div>
#container {
width: 300px;
height: 500px;
}
#one {
width: 100px;
height: 500px;
float: left;
background-color: green;
}
#two {
width: 200px;
height: 500px;
background-color: blue;
}
Float the second div, or put a margin-left equal to the first div's width:
Floating JSFiddle:
#two {
width: 200px;
height: 500px;
background-color: blue;
float: left;
}
Margin-left JSFiddle
#two {
width: 200px;
height: 500px;
background-color: blue;
margin-left: 100px;
}
#PlantTheIdea's suggestion to use display: inline-block is sound. This question does have a purpose though: when you want the second div to consume the remaining space (and don't want to use display: table e.g.)
Here's an example of that too:
#container {
height: 500px;
clear: both;
}
#one {
width: 100px;
height: 500px;
float: left;
background-color: green;
}
#two {
height: 500px;
background-color: blue;
margin-left: 100px;
}
You need to ditch the floats, and discover display:inline-block; my friend!
Your HTML:
<div id="container">
<div id="one">
</div><div id="two">
</div>
</div>
And your CSS:
#container {
width: 300px;
height: 500px;
}
#one,#two {
display:inline-block;
vertical-align:top;
/* Old IE */
*display:inline;
*zoom:1;
}
#one {
width: 100px;
height: 500px;
background-color: green;
}
#two {
width: 200px;
height: 500px;
background-color: blue;
}
Here is an updated jsFiddle.
The reason I eliminated the space between the two divs is because if there were any space, inline-block would put a 4px margin between them. The Old IE pieces are for IE7 and below.
You need float:left on both divs
#one {
width: 100px;
height: 500px;
float: left;
background-color: green;
}
#two {
width: 200px;
float:left;
height: 500px;
background-color: blue;
}
Fiddle
You could solve this by making the second div float as well:
#two {
float: left;
width: 200px;
height: 500px;
background-color: blue;
}
Float left the next one too!!
<div id="container">
<div id="one">
</div>
<div id="two">
</div>
</div>
#container {
width: 300px;
height: 500px;
}
#one {
width: 100px;
height: 500px;
float: left;
background-color: green;
}
#two {
width: 200px;
height: 500px;
background-color: blue;
float:left;
}
Just add another "float:left" value on second div.
#one {
width: 100px;
height: 500px;
float: left;
background-color: green;
}
#two {
width: 200px;
height: 500px;
background-color: blue;
float:left;
margin-left:20px
}
DEMO
Set The #two Div to float:left as well.
I want to make 3 divs in one line. Left, middle, right.
Left and middle must have fixed size (300 px for example) and middle have to resize dynamically (in percents). Here is my css:
#content
{
width: 100%;
height: 435px;
}
#content_left
{
float: left;
width: 300px;
height: 345px;
border: 1px solid red;
}
#content_middle
{
margin-left: 300px;
margin-right: 300px;
width: 100%;
height: 345px;
border: 1px solid green;
}
#content_right
{
float: right;
width: 300px;
height: 345px;
border: 1px solid red;
}
#wrap
{
maring: 0 auto;
clear: both;
width: 100%;
margin-left: auto;
margin-right: auto;
min-width: 1020px;
}
And here is my html:
<div id="wrap">
<div id="content">
<div id="content_right"></div>
<div id="content_left"><div>
<div id="content_middle">
</div>
</div>
</div>
alt text http://img509.imageshack.us/img509/8940/capturewj.png
How can I make my green div to fill all size between other 2 divs?
Your HTML has an error. The left div is not closed. It should be:
<div id="content_left"></div>