I have 3 divs, 'left div', 'right div' and 'bottom div'. I have been hopelessly trying to position them in a certain way but it just doesn't work. This is how I would ideally like them to be:
The main problem is the fact that 'left div' and 'right div' are of different heights so how would I sort this mess out?
EDIT: I would also like to add that the left and right divs need to be centered within the content area.
<div id="content">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>
css:
#content{
width:1000px;
margin:0 auto;
}
.left{
width:495px;
float:left;
margin-right:10px;
}
.right{
width:495px;
float:left;
}
.bottom{
clear:both;
margin-top:10px;
}
then if you want the left and right to match:
(using jquery)
$(document).ready(function(){
var leftdiv = $('.left').height();
var rightdiv = $('.right').height();
if(leftdiv > rightdiv)
$('.right').css('height', leftdiv + 'px');
else
$('.left').css('height', rightdiv + 'px');
});
Statically set their heights or use javascript to match them if the height is dynamic based on content.
Here's the HTML for the divs, remove the #container if you don't want to center them:
<div id="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="bottom">Bottom</div>
</div>
Here is the CSS:
#container {
width: 200px;
margin: 0 auto;
}
.left {
float: left;
width: 100px;
background: silver;
}
.right {
float: right;
width: 100px;
background: red;
}
.bottom {
clear: both;
background: aqua;
}
I just used the colors to highlight the position. You can of course change the widths of the divs, but remember that the #container width has to be the width of .left + .right.
Read this to find out more about floats.
You can find a demo of the code here: http://jsfiddle.net/teaJb/
float the left and right div's to their respective directions. set identical padding right and left on the containing div. on the bottom div apply "clear:both" to clear the float and "margin:0 auto" to center it relative to the container.
if you don't match the heights, obviously the bottom div would appear after the higher div. you can match height using jquery's .height() method to compare the actual heights and set the higher value for both divs. Alternatively, you can just set a CSS rule for a constant height or a dynamic min-height.
Related
I am trying to create a page footer with some text on the left, on the right, and centered on the page. I've been following examples such as this and I'm having the same problem with all of them: The content in the center div is centered between the borders of the left and right divs, not centered on the body. That is, if left/right are not the same width then the center is off-center.
I can't use fixed widths because I know neither the content nor the font size. I do know the content will be just a few words each.
I can't use explicit proportional widths either for similar reasons; I don't know the proportions of the content and e.g. the center may be short with a left or right side greater than 1/3 of the page width.
I don't actually have to use divs, I just am because that seems to be the way this is done... but anything that will get me a left + body centered + right aligned footer-style layout will work (as long as it works on all common browsers).
I don't care what happens when contents overlap; they can either overlap, or word-wrap, or do something else ugly.
Currently the closest I've gotten is this CSS:
#left { float:left; }
#right { float:right; }
#center { float:none; text-align:center; }
And this HTML:
<div id="container">
<div id="left">...</div>
<div id="right">...</div>
<div id="center">...</div>
</div>
But I am seeing this (an extreme example):
Here is a fiddle: http://jsfiddle.net/HCduT/
I've tried various combinations of float, display, overflow, and margin, but I can't seem to get this right.
Edit: I've also tried http://jsfiddle.net/nshMj/, recommended by somebody elsewhere, but it's got the same issue (with the disadvantage that I don't really understand what it does).
How do I make the content in the center div aligned to the page, rather than centered between the left and right divs (which have different sizes)?
I'm not 100% sure what you're after. Here's what I did get:
You want the left div on the left
You want the right div on the right
You want don't want to limit the width of those to 33%;
You want the center to always be dead center.
You don't care about overlapping content
If I got that right, then try this out: DEMO
CSS:(The color is just so you can distinguish the content, as it overlaps)
#content {
text-align:center;
}
#container {
position: relative;
}
#left {
float:left;
}
#right {
float:right;
color: #ccc;
}
#center {
text-align:center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: red;
}
After some research i ended with this:
html
<body>
<div id="content">center point V center point</div>
<div id="container">
<div id="left">L</div>
<div id="center">C</div>
<div id="right">RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR</div>
<br style="clear: left;" />
</div>
</body>
css
#content {
text-align:center;
}
#left {
width:33%;
float:left;
}
#right {
width:33%;
float:left;
overflow:hidden !important;
}
#center {
float:left;
width:33%;
text-align:center;
}
#container{
width:100%;
}
fiddle
Here is a screenshot:
My only challenge is whether it would be possible to spill the left column out of the container. Is this possible at all? The container will not have a bg, it is only there for visual purposes.
#container { width: 960px; margin: 0 auto }
#left-column { ??? }
#right-column { width: 200px; float: right }
For more details as to what I'm trying to achieve, here's another screenshot:
The 960 container is marked by the teal rulers on the sides. The flights have a border at the top and bottom that extend all the way to the left and expands outside of the 960 container.
Something like this will do it:
<div id="container">
<div id="right-column"></div>
<div id="left-column"></div>
</div>
CSS:
#container { width: 100%; margin: 0 auto; display:inline-table }
#left-column { height:500px; background:#00ff00;width:auto}
#right-column { width: 150px; float: right;height:500px; background:#00ffff }
Check it here:
http://jsfiddle.net/h9XuQ/
If you insists putting the left div inside the container, it is impossible without help of javascript.
If what you want is just to take up the remaining section of the page and don't mind where it is placed, you may try the following:
#theLeftColumn {
position：fixed; /*or absolute if it is a direct child of body*/
margin-top:0px; /*set to other value if you need to leave space for header menu */
left: 0px;
/*280px = (width of container)/2 - (width of right fixed width column)
= 960px/2-200px */
width: -moz-calc(50% + 280px);
width: -webkit-calc(50% + 280px);
width: calc(50% + 280px);
/*if it is div, the default of display is block, else it is needed to be set */
display:block;
}
Notice that CSS3 is needed for calc function.
What you need is propably a wrapper element.
The content is obviously placed in a wrapper element which size must larger than 960px.
I guess it's all about the following code,
<div id="wrapper">
<div id="960container">
<div id="left-column"></div>
<div id="right-column"></div>
</div>
</div>
Is that what you want to ask?
Not sure whether you want to know the origin or the styling problem.
I am in need of some help with some divs.
I currently have
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
and I am trying to make it so the following occurs.
Left div aligns against left side of the screen, while right aligns to the right. The main then would be 1000px wide and be in the middle of the page
| Left Div | Main div 1000px wide | Right div |
I have seen this done using tables but I'd rather use a div to create my layout.
the main div will have other divs inside it for contents so I will also need the left and right divs height being the same as the main div.
Anyone able to help?
Regards,
Mason
You can do table-like layouts using divs. Check out the table-* values for CSS display.
http://jsfiddle.net/MVSjr/
HTML
<div class="table">
<div>
<div id="left">test</div>
<div id="center">test</div>
<div id="right">test</div>
</div>
</div>
CSS
#left {
background:#F00
}
#center {
background:#0F0;
width: 300px;
}
#right {
background:#00F
}
.table {
display:table;
width:100%;
}
.table > * {
display:table-row;
}
.table > * > * {
height: 200px;
display:table-cell
}
If you want a constant distance between the left / right divs to the main one, you'll have to specify it. My advise is to specify a page width, say 1300 px, and then split div's measures as you need (e.g: 150px for the left div, 1000px for the middle, 150px for the right. And then center the wrapper div to the page.
.wrapper{
width: 1300px;
margin: auto;
}
.left{
width:150px;
}
.main{
width:1000px;
}
.right{
width:150px;
}
You might also want to consider making it responsive either by specifying width in % if your content allows it or by specifying break-points in media-queries, but it's just a thought...
You are looking for three column layout for your web page. Three column layout can be either fixed or fluid.
In Fixed layout all the three columns would have the fixed width and when you re-size your browser screen, they will display with horizontal scroll bar.
In Fluid layout all the three columns would have width in percentage of screen width. Here is an example of three column fluid layout.
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
and CSS
div{
display:inline-block;
height:500px;
}
.left,.right{
background:red;
width:15%;
}
.main{
background:green;
width:70%;
}
Js Fiddle Demo
If I have a div which I want to center between two other divs, one floated left and one floated right, giving it a margin of exactly 10 pixels on either side (between it and the div on that side), how would I give it a fluid width, such that it would get wider or narrower as the window size is changed, but always maintain a distance of exactly 10 pixels between it and the divs on either side?
Try this fiddle. Solution works with pure CSS.
The trick is: width: 230px; /* 10 more width than column size */
http://jsfiddle.net/ngdS9/1/
Here's a fiddle of my answer:
http://jsfiddle.net/utThB/
If your left and right div elements are of variable witdh, the only way I can see this done is to dynamically get the width of the left and right divs via jQuery (or pure JavaScript, ask me for this version) and then adding the margin style to the centered div.
jQuery:
$(document).ready(setWidth);
function setWidth(){
var $left_width = $(".left").width() + 10;
var $right_width = $(".right").width() + 10;
$(".center").css("margin-left",$left_width + 'px');
$(".center").css("margin-right",$right_width + 'px');
}
HTML:
<div class="container">
<div class="left">Variable width DIV</div>
<div class="right">Another.</div>
<div class="center">Centered Div</div>
</div>
CSS:
.container{width:100%;}
.left{
float:left;
background-color:green;
}
.center{
text-align:center;
background-color:blue;
width:auto;
}
.right{
float:right;
background-color:red;
}
Try this. Here's a fiddle
HTML
<div id=wrapper>
<div id=leftdiv>left</div>
<div id=rightdiv>right</div>
<div id=main>
Lorum Ipsum
</div>
</div>
CSS
#main {
padding-right:60px;
padding-left:60px;
}
#leftdiv {
float:left;
width:50px;
background-color:#ddd;
}
#rightdiv {
float:right;
width:50px;
background-color:#ddd;
}
I have a page in which a header consists of three divs - one that's floated to the left, one that's floated to the right, and one that's in between them. I'd like for that central div to be centered, yet sadly float: center doesn't exist and I can't just float it to the left and add padding as it'd have to change depending on the window size.
Is there something simple I'm overlooking? Or how would I do such a thing?
Update:
In addition, I'd like to find a way of centering that middle div in the space between the divs in case that looks better.
If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:
left-floated | right-floated | centered
Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:
margin:0 right-floated-width 0 left-floated-width
That should work.
Years later edit
Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.
You can see a very good flexbox guide here. The example you need is right here.
Indeed, the important part is that the centered div come after the left and right divs in the markup. Check out this example, it uses margin-left: auto and margin-right: auto on the centered div, which causes it to be centered.
<html>
<head>
<style type="text/css">
#left
{
float: left;
border: solid 1px red;
}
#mid
{
margin-left: auto;
margin-right: auto;
border: solid 1px red;
}
#right
{
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="mid">
mid
</div>
</body>
</html>
Here's a JS Bin to test: http://jsbin.com/agewes/1/edit
Usually you can use flexbox instead of floats:
https://jsfiddle.net/h0zaf4Lp/
HTML:
<div class="container">
<div>left</div>
<div class="center">center</div>
<div>right</div>
</div>
CSS:
.container {
display: flex;
}
.center {
flex-grow: 1;
}
The element with the centered content needs to be specified after both floated elements. After that, simply set the middle element to text-align: center. The text in the centered element will squeeze in between the floats.
See here:
http://jsfiddle.net/calvintennant/wjjeR/
Try this (make sure to use better class names):
.left {
float:left;
width:200px;
}
.right{
float:right;
width:200px;
}
.center {
overflow:hidden;
zoom:1;
}
The center div will fit between the two floats.
If you want to create a gutter between that centered div and the two floats, then use margin on the floats, not on the center div.
Because of "zoom", the CSS will not validate, but that layout will work in IE 5.5 and 6.
Note that source order is important here: the two floats must come first, then your "centered" div.
In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:
For container: position: relative
For middle div: position: absolute; left: [containerWidth - middle-width / 2]
I hope you got the idea.
A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:
.container {
position: relative;
}
.container div {
width: 200px;
background: red;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
https://jsfiddle.net/Helioz/nj548y0g/