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
Related
I am one of those using tables for everything, but now when some table attributes has been deprecated I feel obligated to switch to divs CSS so I have a simple layout table I need to change to divs and I cannot make it to work as I need.
The 3 column layout must have: left column 200px width and 100% height, right column must be also 200px width and 100% height but the middle column I will put content there so it must be 100% width that means if the screen is 1200px it will take 200px to left column 200px to left column and middle content column will auto-be 800px and so on, also with 100% height.
Here is what I did but cannot make it to work:
<style type="text/css">
.table {display:table;width:100%;min-width:1000px;height:200px;}
.row {display:table-row;}
.columna {display:table-cell;background:#666666;width:200px; float:left; margin-left:0px; height:100%;}
.columnb {display:table-cell;background:#cccccc;width:100%;height:100%;}
.columnc {display:table-cell;background:#666666;width:200px;float:right;margin-right:0px;height:100%;}
</style>
<div class="table">
<div class="row">
<div class="columna">a left column</div>
<div class="columnb">b middle column</div>
<div class="columnc">c right column</div>
</div>
</div>
For some reason I cannot understand the middle column is not using the correct height, its bigger I don´t know why. Also I cannot make it to respect the 100% height neither.
Any ideas?
EDIT
here is a demo Fiddle
https://jsfiddle.net/4xcg1eng/
The only way I can fix it is with div inside divs, almost the same crap as using tables but tables are even easier. I think those saying divs are best are wrong
I have created a working model using the display:table property.
html, body {
height:100%;
}
.table {
display:table;
width:100%;
height:100%;
}
.row {
display:table;
width: 100%;
height: 100%;
}
.columna {
background:#666666;
display: table-cell;
text-align: center;
vertical-align:middle;
width: 200px;
}
.columnb {
background:#cccccc;
display: table-cell;
text-align: center;
vertical-align:middle;
}
.columnc {
background:#666666;
width:200px;
display: table-cell;
text-align: center;
vertical-align:middle;
}
<div class="table">
<div class="row">
<div class="columna">a left column</div>
<div class="columnb">b middle column</div>
<div class="columnc">c right column</div>
</div>
</div>
But I would recommend you look at using a grid layout similar to bootstrap. If you are used to working in tables, the grid system should resonate a little with you.
Did some edits to it in a fiddle here and got it working, let me know if this is what you were looking for :)
https://jsfiddle.net/fe0ftxh0/
The CSS looks like this now
<style type="text/css">
.table {width:100%;height:200px;}
.columna {background:#666666;width:20%;float:left;height:100%;}
.columnb {background:#cccccc;width:60%;float:left;height:100%;}
.columnc {background:#666666;width:20%;float:left;height:100%;}
</style>
I updated your fiddle here with a working solution:
https://jsfiddle.net/4xcg1eng/17/
You can achieve exactly what you are looking for without using display:table. The trick is the order in which you float your elements. Your markup needs to specify column a and column c above column b.
<div class="table">
<div class="row">
<div class="columna">a left column</div>
<div class="columnc">c right column</div>
<div class="columnb">b middle column</div>
</div>
</div>
specify column a to float left, column c to float right, and add left and right margins equal to the widths of columns a and c to column b.
your css gets much simpler:
.table { height: 200px;}
.row {height: 100%; }
.columna {background:#666666; width:200px; float:left; height:100%;}
.columnb {background:#cccccc; height:100%; margin-left: 200px; margin-right: 200px;}
.columnc {background:#666666; width:200px; float:right; height:100%;}
You do not need to specify 100% width for divs -- they are automatically 100% width unless you specify otherwise.
I agree that using floating DIVs to do column-style layout is hard to wrap your head around if you are used to table layout. But once you get used to it, it will free you from the being constrained by the table grid, especially when you need to reconfigure your layout for various sized screens.
You may want to consider using the flexible box model to achieve what you are after. This is the kind of situation it is well suited for.
I have page that loads data in dynamically. I have put the image on the left and some text on the right. In two column by using float:left;
This works fine but the height of the containing div does not change to match the height of the larger div.
I have soemthing like this:
<div class="container">
<div class="left">//some php to load image</div>
<div class="right">//loaded text</div>
</div>
.container{
width:800px;
height:auto;
}
.left,.right{
float:left;
height:auto;
}
.left{
width:300px;
}
.right{
width:500px;
}
The divs are next to eachother but the containing div only resizes to the height of the smallest div. Shouldn't it resize to the height of the largest div?
Add overflow:auto to the .container element..
I think this is a typical clearfix problem.
Read here about clearfix: What is a clearfix?
So on my screen this works fine on all browsers, but when i try to view my site on laptop or a smaller screen #sidebar and #center move to the left. I assume it has something to do with #sidebar's margin-left but is there any other way to make sidebar and center go under the header and next to each other?
#header {
background-image:url(media/dddd.png);
margin-left:auto;
margin-right:auto;
width:1000px;
height:250px;
position:relative;
}
#sidebar {
height:800px;
width:300px;
background-color:#CCFFFF;
float:left;
margin-left:23.5%;
margin-right:auto;
position:static;
}
#center {
margin-left:auto;
margin-right:auto;
height:800px;
width:700px;
background-color:white;
float:left;
border:1px solid black
}
Since #sidebar has left-margin: 23.5%;, it moves to the left when you reduce the window because it will always be 23.5% of the window width. So if your window is 1000px wide, the #sidebar div's margin-left will be 235px, and this number decreases with the width of the window (making it look like the div is moving to the left).
The #center div moves down because the width of the window is less than the margin-left value + the width of #sidebar + the width of #center. When the window is too narrow, the divs rearrange to fit (like how text in a text box goes to a new line when it runs out of space).
If you want to keep your layout how it is when the window gets smaller, there are two easy things you can do:
Make all of your divs width a percentage: If your #sidebar has margin-left:25%; width:20%; and your #center div has width:50%, both of the divs (and the margin) will resize as the screen shrinks (this is one way Responsive Web Design works). Here is an example on jsFiddle.
Put everything in a container div: Since it sounds you want to have your header, sidebar, and content in one block, you could wrap all of these elements in a container div. You'll have to change your CSS a bit, but a basic implementation would look something like this:
CSS
#container {
width: 1000px;
margin-left:auto;
margin-right:auto;
}
#header {
background-color:red;
width:auto;
height:250px;
}
#sidebar {
height:800px;
width:300px;
background-color:#CCFFFF;
float:left;
}
#center {
height:800px;
width:auto;
background-color:green;
border:1px solid black
float:left;
}
HTML
<div id=#container">
<div id="#header">header content</div>
<div id="#sidebar">sidebar content</div>
<div id="#center">center content</div>
</div>
Here is a jsFiddle with this code.
Since the container div has a set width, you don't have to worry about the widths of the child elements.
so i think you want to get #sidebar and #center beside each other,centered and under #header or?
Would be nice if we can see your html markup but
just give every div position:relative and a float left.
then you give the #sidebar left:50%.
Then add the width of both divs /2 (#sidebar and #center). --> (sidebar.width + center.width) /2
Then you give the result #sidebar with a margin-left and a minus before. --> margin-left: -500px
I think the issue lies with your HTML.
Ensure that your sidebar <aside> and your content <article> are nested within the same <div> or <section>.
The terms I'm using are with HTML5 syntax. If you aren't using HTML5, replace all elements with <div>.
Example:
<header></header>
<div>
<section></section>
<aside></aside>
</div>
If both the <section> & <aside> have a width:% or px; & float:left; you should be fine.
sir,
i created a div tag in my html page and that displays a product.inside the product_box div i have two columns (lleft and right) using float.
both columns fit in the product_box dividing the container into two vertical halves.but when i type content in the right half the content comes out of the div if it is longer than one line.i want that i continue typing multiple lines and it fits inside the right half.
i dnt want the overflow:scroll; method or hidden as well coz the scroll bar looks very bad.
plz suggest a way to acheive this.
CSS:
#content_left .product_box {
margin-right: 10px;
}
.left {
float:left;
padding:10px;
width:178px;
height: 174px;
}
.right {
float:left;
padding:10px;
text-align:left;
width: 396px;
height: 136px;
}
HTML:
<div class="product_box">
<h3>Product Title</h3>
<div class="left">some content here</div>
<div class="right">
jhkdjfhkjhkjhkjhkhkhkhkjhkjhkjhkjhkhkhkh
</div>
<div class="cleaner"></div>
</div>
You can use min-hieght instead of height to ensure it gets minimum height and grows if the content increases...
and be sure too add float clearer like: <div style="clear:both"></div> after the floating divs... in order to make parent container take its height
Add an element at the end of your div with the style clear:both; ( and maybe height:1px; )
I got headache how to make my fluid content will float to right.
left sidebar is fixed size.
right content is fluid size.
Here and example my html and css
How to make my id="content" will float on right?
Set a margin and remove the float/width on #content, like so:
HTML:
<div id="wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
CSS:
#wrapper {
width:400px;
overflow:hidden;
padding:10px;
}
#sidebar {
float:left;
width:100px;
}
#content {
margin: 0 0 0 100px;
}
div {
border:1px solid #333;
}
http://jsfiddle.net/HWMJc/1/
There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites. Dont need put a float or width on the fluid div at all.
http://jsfiddle.net/HWMJc/874/
#sidebar {
float:left;
width:100px;
}
#content {
overflow:hidden;
}
You should set it to be:
sidebar{ width:100px; float: left}
Don't use 100% width on #content.
70% works, but there is a small gap between the two elements. You can adjust it to make it fit better though.