I am trying to set up a border layout with top, left, center, right, bottom. I have seen a few examples and tried them, but none of them seem to work. The main problem is with the left, center, and right columns. I can only get two divs aligned horizontally, the third always falls below the footer. I need this to be resizable. Preferably the center pane will fill the full until the borders.
I have tried float left and float right but it didn't make a difference.
This is what I have tried so far.
http://jsfiddle.net/xQVWs/2/
<body>
<div class="top-wrapper">
<div class="content-wrapper">
<header>
header
</header>
</div>
</div>
<div class="mid-section">
<div class="left-wrapper">
Left Pane
</div>
<div class="main-content">
Main pane
</div>
<div class="right-wrapper">
right pane
</div>
</div>
<div class="bottom-wrapper">
<div class="content-wrapper">
footer
</div>
</div>
</body>
You could use float:left on the first two middle columns and a float:right on the third. I would put an overflow:hidden on the wrapper for the middle columns.
http://jsfiddle.net/zer6N/1/
.mid-section
{
background-color: blue;
width: 100%;
height:1000px;
overflow:hidden;
}
.left-wrapper, .right-wrapper {
background: #ffff00;
height: 100%;
min-height: 100%;
width: 21%;
display:block;
float:left;
margin:0;
}
.right-wrapper {
background:#efefef;
float:right;
}
.main-content {
background-color: black;
width: 58%;
height: 100%;
margin:0;
float:left;
}
Related
hi I am having a problem centering my content div between my left and right sidebars. My left and ride side bars are floating and there isn't a float:center. The only way I can center it is using padding but that makes my center div go underneath my sidebars.
make a wrapper around all 3 divs and then position the centered div with a margin
<div id="wrap">
<div id="left" style="float: left"></div>
<div id="content" stlye="float: left: margin: 0 auto;"></div>
<div id="right" stlye="float: left"></div>
</div>
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}
Floatting basis would be:
<div id="left"> Left</div>
<div id="right" >right</div>
<div id="middle">in between, but after</div>
#left {float:left;width:XX;}
#right {float:right;width:XX;}
#middle {overflow:hidden; margin:0 XX;}
You can as well look for other methods to keep div in the flow [left][middle][right], like using : display: table/table-cell | inline-block | flex.
<div style="widht: 960px;">
<div class="content left">left</div>
<div class="content center">center</div>
<div class="content right">right</div>
<div style="clear:both"></div>
</div>
here the css
.content {
float: left;
}
.left , .right{
width : 180px;
margin : 0 10px;
}
.center{
widht: 540px;
margin : 0 10px;
}
<div id="leftdiv" style="background: yellow; min-width: 400px; max-width: 800px;">left content left content left content</div>
<div id="rightdiv" style="background: red; width: 250px;">right content right content right content</div>
I put the float: left in the left div max-width and min-width not working.
How can i fix this ?
Float right div must be before left coz it gives trouble in some version of ie
<div id="rightdiv" >right content right content right content</div>
<div id="leftdiv">left content left content left content</div>
CSS same as bot
#leftdiv
{
background-color:Yellow;
min-width:100%;
max-width:800px;
float:left;
}
#rightdiv
{
background-color:red;
width:250px;
float:right;
}
Move your right div before the left one:
<div id="rightdiv" >right content right content right content</div>
<div id="leftdiv">left content left content left content</div>
And now just float the right one:
#leftdiv {
background: yellow;
min-width: 400px;
max-width: 800px;
}
#rightdiv {
background: red;
width: 50px;
float: right;
}
Check this FIDDLE DEMO to see is that you want or not.
[!] I've reduce width of right element to see the result in my monitor. You can use the old one.
If you want one of 2 divs to shrink when the viewport is resized, it is wisest to either do as Andi Muqisth said, and use percentages to resize yourd divs, or make one the parent of the other, like so:
Demo: http://jsbin.com/ileyaf/4/edit
<div id="leftdiv">left content left content left content
<div id="rightdiv">right content right content right content</div>
</div>
#leftdiv {
background: yellow;
width: 100%;
}
#rightdiv {
background: red;
max-width: 250px;
float: right;
}
Float left seems working.. see this fiddle
<div id="leftdiv">left content left content left content</div>
<div id="rightdiv" >right content right content right content</div>
CSS
#leftdiv
{
background-color:Yellow;
min-width:100%;
max-width:800px;
float:left;
}
#rightdiv
{
background-color:red;
width:250px;
float:right;
}
if you specify left side div first then simply put
<div style="float:left">
</div>
<div style="clear:both">
</div>
<div style="float:right">
</div>
else if you specify right side div first there is no need of clear both
<div style="float:right">
</div>
<div style="float:left">
</div>
How would i make my middle div take the remaining space left in width, but still staying in its place beside the 2 other divs?
Also if i remove either of the 2 divs on the sides, the main div should just take what space there is left?
Code:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
http://jsfiddle.net/U3Hr5/2/
My suggestion is using a table since you want all of them to be on the same row but with their own heights.
Html:
<div class="row-fluid">
<table style="width: 100%">
<tr>
<td class="sidebar">1</td>
<td class="content-box">2</td>
<td class="sidebar">3</td>
</tr>
</table>
Css:
.sidebar {
width:225px;
background-color:blue;
}
.content-box {
background-color:red;
}
Here is the fiddle edit:
http://jsfiddle.net/mDpEX/
//Flipbed
If you don't want to use table for layout, you can make use of css3 display table, table-cell properties,
#container {
display: table;
width: 100%;
}
#left, #middle, #right {
display: table-cell;
height: 100px;
}
#left, #right {
width: 150px;
background: green;
}
#middle {
background: gray;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
jsfiddle
More on css display properties
I assume you want something like this.
The HTML:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
The CSS:
.sidebar {
float:left;
width:225px;
background-color:blue;
}
.content-box {
clear:left;
background-color:red;
width:225px;
}
Hope this helps.
Actually i didn't get your question correctly. If you are looking to align your div on to the remaining space after your first div ie after sidebar div simply put width of content-box as 50%(or the size you want).
It depends upon how much you want the layout to respond to resizing without using JavaScript and what browsers you're trying to cater for. If your layout is essentially static and you just want to respond to width changes then you can use something like this.
http://jsfiddle.net/U3Hr5/4/
HTML
<div class="row-fluid">
<div class="span12">
<div class="left sidebar">1</div>
<div class="content-box">2</div>
<div class="right sidebar">3</div>
</div>
</div>
CSS
.span12 {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
width: 225px;
background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
margin-left: 225px;
margin-right: 225px;
background-color:red;
}
You can try something like this http://jsfiddle.net/kKGVr/
Basically, if you don't wrap the content in a containing div it will expand to fill the available space - you can test this by removing the divs called #left or #right. This will also allow you to add a footer because no absolute positioning is used.
It will fall down, however, if the central column becomes longer than the side columns... solution? Not sure, perhaps use javascript to adjust the height of the side columns so they are always at least as long as the central column.
HTML:
<div id="wrapper">
<div id="right">...</div>
<div id="left">...</div>
content here
</div>
and CSS:
#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}
How can i set the width of the first 2 divs to be dynamic (fit the contents width), while the 3rd div should use remaining horizontal space and be horizontally scrollable.
The result i need is that all 3 divs sit side by side and the 3rd div is hoziontally scrollable.
Script i have is as follows
HTML
<div id="a">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="b">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="c">
<table>
<tr><td>text</td></tr>
</table>
</div>
CSS
div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
width: 100%;
overflow-x: scroll;
}
The above script pushes div3 to the next line, which i dont want.
If you float #a and #b to the left, #c will fill the rest of the parent's width.
To get #c horizontally scrollable, you style its content container as:
#c .scroll-content {
/* You shouldn't do this on a table, but rather on a wrapping container. */
display: inline-block;
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
I made an example at JSFiddle.
You should set a parent div to hold them all together in the same row. Something like this instead should work.
<div id="parent">
<div id="a">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="b">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="c">
<table>
<tr><td>text</td></tr>
</table>
</div>
</div>
div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
}
#parent{
width: 100%;
overflow-x: scroll;
}
Also you might want to refactor your code. Since all of the divs are floating left, you might want to use just one class that floats to the left. I hope this helps.
The CSS...
#a {
float:left;
border:solid 1px #000;
width:33%;
}
#b {
float:left;
border:solid 1px #000;
width:33%;
}
#c {
float:left;
border:solid 1px #000;
width:33%;
}
.scroll{
float:left;
overflow:auto;
width:100%;
}
.content {
width:1000px;
overflow:auto;
}
And the HTML...
<div id="a">
This is text within my first content box
</div>
<div id="b">
This is text within my second content box
</div>
<div id="c">
<div class="scroll-content">
This is text within my third content box and this is horizontal and scrollable
</div>
</div>
UPDATED JSFIDDLE LINK BELOW AGAIN!!!
And a demo on jsfiddle - http://jsfiddle.net/GeLqV/1/
Mark, this will work for you now. I now see that you wanted all three divs on the same row, and the last one being able to horizontally scroll. Look at my jsfiddle demo. No matter what your screen size will be, all three div's are fluid in size and will stay together (for the most part).
I've searched high and low and cannot find a solution specific to this problem. I'm trying to accomplish the following:
Have a container DIV defined with a percentage height to serve as max-size container
A secondary container DIV that provides a content size-based borde
Have a header div that is fixed at the top of that DIV
Have a list of DIVs (table-like) under the header
When the list is short, the border is reduced to size of content
When list if long (> height of outer container), scrollbar is shown for DIV list and not header.
I put together the following simplified version:
<html>
<head>
<style type="text/css">
.panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; }
.header { border-bottom: 1px solid black; }
.scroll { max-height: 100%; overflow: auto; }
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
The two red boxes should be fixed size. Check
The blue box should size to be the size of the content or size of red box maximum. Check
When contents in lower exceed red box size, scrollbar should be displayed under header. Fail
Any change I make that gets the scrollbar displayed causes the top blue box to enlarge to the size of it's container, red box. e.g., { .scroll height: 100% }
(The DIV.wrap does have a purpose - just not in this example. It is intended to provide a double-border effect on the sizer, so it should be the same size as sizer all the time).
Also, I have figured out some solutions where I used fixed (px) sizes for the DIVs, but this is not necessarily desired. Especially on DIV.panel - this must be set to a percentage height.
Not completely sure i understand the question, but if you want the scroll on the list but not on the header, have you tried:
overflow-y:scroll;
on the "scroll" div instead of
overflow:auto?
Let me know
Ok i think maybe i worked it out. I think cause you have overflow:hidden and a height on the container div, and not the variable scroll div. Just try the code below and let me know. I have added the height of 10% to the scroll div and not the overall container. Hope thats what you were looking for
<html>
<head>
<style type="text/css">
.panel { border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; display:block;}
.header { border-bottom: 1px solid black; }
.scroll { height: 10%;overflow-y: scroll; display:block; }
.scroll div {display:block; line-height:normal; clear:both; height:20px;}
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>