I am trying to create a layout as follows
Here's the CSS I used
#leftcol { width:15%; position:fixed; float:left;background-color:aliceblue;}
#main { width:50%; height:400px; float:right;background-color:black;}
#comments { display:block; width:50%; float:right; height: 500px; }
This is how my Div's are laid out
<div id="leftcol"></div>
<div id="main"></div>
<div id="comments"></div>
Looks like I am missing something. Any help? The height of each div should be flexible to accomodate it's content
I think you want to add a clear to your comments
clear: right;
http://jsfiddle.net/x9rZj/1/
Here you go: Remove the height from all the divs if you want it to be flexible as you add content, you could also add a min-height:200px; so no matter how much content you have its going to be at least 200px high.
http://jsfiddle.net/5tQt2/
try the following styles
<style>
#leftcol { width:15%; height:100%; float:left;background:blue;}
#main { width:50%; height:400px; float:left;background:black;}
#comments { display:block; width:50%; float:left; height: 500px; background:red;}
</style>
<div id="leftcol"> </div>
<div id="main"> </div>
<div id="comments"> </div>
Related
So I have a header bar that's something like [IMG______TITLE______IMG]
I have something like this, where all 3 elements are in 1 div:
#left_image {
display:block;
width:80px;
height:100%;
float:left;
}
#middle_div {
width:1030px;
height:100%;
text-align:center;
display:inline-block;
}
#left_image {
display:block;
width:80px;
height:100%;
float:right;
}
But for some reason, only on IE, the last picture is on the next line, like:
[IMG_______title__________]
[______________________IMG]
You can see the last image is still going to the far right, but for some reason outside of the containing div...Any idea how to properly horizontally align these?
You can do this without floats, and some simple positioning:
<div class="wrapper">
<div class="left">Left things</div>
<div class="middle">Middle things</div>
<div class="right">Right things</div>
</div>
.wrapper {width:100%;background-color:#eee;position:relative;}
.left,.middle,.right {display:inline-block;padding:10px;}
.middle {text-align:center;}
.right {position:absolute;right:0;}
Here's a link to a demo: http://jsfiddle.net/76t8ca7h/
Updated fiddle: http://jsfiddle.net/76t8ca7h/3/
and new css:
.wrapper {width:100%;min-width:100%;background-color:#eee;padding:0;margin:0;overflow:hidden;}
.left,.middle,.right {display:inline-block;vertical-align:top;float:left;}
.middle {text-align:center;width:60%;}
.left,.right {width:20%;background-color:#ccc;}
.right {float:right;}
I realize that already there is a lot of material on here pertaining to this issue, but I still am having trouble placing three divs side-by-side rather than stacked on top of each other.
http://jsfiddle.net/wkQv6/
<body>
<div id='boom'>
<div id='menutab' class='navbar'>
Menu
</div>
<div class='navbar' id='storytab'>
Our Story
</div>
<div class='navbar' id='contacttab'>
Contact
</div>
</div>
</body>
#boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03/Buca-di-Beppo-table_setting2.jpg);
text-align:center;
height:1000px;
width:100%;
background-repeat:no-repeat;
margin-top:0px;}
div.navbar{width:100px;
float:left;
display:inline-block;
background-color:black;
opacity:.7;
position:fixed;
z-index:1;
height:25px;
border-radius:0px;
border-right:white;
color:white;
font-weight:bold;
text-align:center;
line-height:25px;
vertical-align:bottom;
}
Change your css as below
#boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03
/Buca-di-Beppo-table_setting2.jpg);
text-align:center;
height:1000px;
width:100%;
background-repeat:no-repeat;
margin-top:0px;}
div {
float:left;
padding-right:10px;
color:#FFF;
}
Use CSS left property, left property sets the left edge of an element,Try this code:
Fiddle:
CSS:
#menutab
{
left:100px;
}
#storytab
{
left:250px;
}
#contacttab
{
left:400px;
}
HTML
Added a wrapper around menu items
<div id='boom'>
<div class="menu">
<div id='menutab' class='navbar'>Menu</div>
<div class='navbar' id='storytab'>Our Story</div>
<div class='navbar' id='contacttab'>Contact</div>
</div>
</div>
CSS
Change position to relative and if you want it in center just add the menu css as shown beow, now the menu items will be in center irrespective of screen size, no hard coded px is required
.menu {
width: 50%;
margin: 0 auto;
}
div.navbar {
width:100px;
float:left;
display:inline-block;
background-color:black;
opacity:.7;
position:relative;
z-index:1;
height:25px;
border-radius:0px;
border-right:white;
color:white;
font-weight:bold;
text-align:center;
line-height:25px;
vertical-align:bottom;
}
Demo
Position:fixed; is the reason for your problem
Change the CSS accordingly.
You need small change in your css
inside this
div.navbar{
Remove position:fixed;
}
Its working fine
I want to expand header and footer to 100% with the variable middle content width.
you can find the source at http://jsfiddle.net/9dWcZ/
HTML:
<div class="header">
this is header
</div>
<div class="content">
this is content
</div>
<div class="footer">
this is footer
</div>
CSS:
.header, .footer {
width:100%;
background:#999;
height:200px;
position:relative;
float:left;
clear:both;
display:block;
}
.content {
width:2500px;
height:100px;
background:#9B191B;
float:left;
}
I don't want fixed header and no change in structure..
Please help..
thanks,
You can achieve this layout as follows.
You need to add a .wrapper element, this is essential:
<div class="wrapper">
<div class="header">this is header</div>
<div class="content">this is content</div>
<div class="footer">this is footer</div>
</div>
For the CSS:
.wrapper {
display: table;
}
.header, .footer {
width:100%;
background:#999;
height:200px;
}
.content {
width:2500px;
height:100px;
background:#9B191B;
}
The key is to apply display: table to the .wrapper block.
See demo at: http://jsfiddle.net/audetwebdesign/7jxLC/
So you want to expand it starting from the middle point?
If that's what you want you can use:
margin-left:auto;
margin-right:auto;
It will start to grow in width from the center then.
I'm currently working on a website, but it's important that it must fit on every page. I have 5 divs horizontal. The 3 divs in the middle are fixed sizes, 200 px, 400 px and again 200px. Now I have one on the far left and one of the far right, that should be equally big and fill out the screen no matter what resolution you're viewing the website in. So the middle part should be in the middle, and the 2 divs on the left and right of the middle part should fill out the screen. I have tried several techniques explained in other threads, but most are only for the left, or only for the right part and not working for both left and right. Maybe someone has a solution?
My HTML
<div id="left">
test
</div>
<div id="buttonsleft">
test
</div>
<div id="middle">
test
</div>
<div id="buttonsright">
test
</div>
<div id="right">
test
</div>
My CSS
#left{
float:left;
background-color:#C00;
width:15%;
height:100%;
}
#buttonsleft{
float:left;
background-color:#3F0;
width:200px;
height:100%;
}
#middle{
float:left;
background-color:#30F;
width:400px;
margin:auto;
}
#buttonsright{
float:left;
background-color:#3FF;
width:200px;
height:100%;
}
#right{
float:left;
background-color:#300;
width:15%;
height:100%;
}
Can be easily done using the CSS table layout.
See that Working Fidde
If the view port is smaller then 1000px wide, then the divs will shrink.
[you didn't specify what should happend if the view port is less then 1000px]
HTML:
<div class="Container">
<div id="left">left</div>
<div id="buttonsleft">buttonsleft</div>
<div id="middle">middle</div>
<div id="buttonsright">buttonsright</div>
<div id="right">right</div>
</div>
CSS:
* {
font-size: 25px;
color: white;
}
.Container
{
display: table;
width: 100%;
}
.Container > div
{
display: table-cell;
}
#left {
background-color:#C00;
}
#buttonsleft {
background-color:#3F0;
width:200px;
}
#middle {
background-color:#30F;
width:400px;
}
#buttonsright {
background-color:#3FF;
width:200px;
}
#right {
background-color:#300;
}
I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.
Here is what my page should look like:
http://imageshack.us/photo/my-images/854/unbenanntgoc.png/
In my html I just define my divs:
<div id="content">
<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />
</div>
So navi image and tag content divs should float.
And this is how my css looks like:
#charset "utf-8";
body {
background-color:#33FF00;
}
#header {
height:100px;
background-color:#FFFFFF;
position:relative;
}
#naviContent {
width:25%;
background-color:#F0F;
float:left;
}
#imageContent {
background-color:#000;
position:absolute;
float:left;
width:800px;
height:600px;
}
#tagContent {
background-color:#900;
position:absolute;
float:left;
width: 25%;
}
#textContent {
background-color:#0000FF;
clear:both;
}
#content {
height:1600px;
width:1200px;
background-color:#999999;
margin-left: auto;
margin-right: auto;
padding:10px;
position:relative;
}
So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?
Thanks in advance
You need to close the DIV properly -
<div id="content">
<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text </div>
</div>
EDIT: Working Fiddle You need to adjust floated width and you are done!
Position absolute is not the standard way of laying out a page.
What you should do is just remove the position attribute, float everything left and set widths (please note you will need content in the div for it to render correctly).
You might want to look into CSS grid systems such as 960.gs as they handle this part of development for you in a standardised way using pre-defined classes.
you should code like this : - http://tinkerbin.com/J9CCZXRL
CSS
#content {
background:pink;
width:500px;
padding:10px;
-moz-box-sizing:border-box;
overflow:hidden;
}
#header {
background:red;
height:100px;
}
#left {
background:green;
width:100px;
height:400px;
float:left;
}
#middle {
background:blue;
width:260px;
float:left;
height:400px;
margin-left:10px;
}
#right {
background:yellow;
width:100px;
float:right;
height:400px;
}
#footer {
background:grey;
height:100px;
clear:both;
}
HTML
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>