I have a basic layout that is one Div container wrapper and three columns Divs inside. I want the left and right column to be of fixed with, with the middle one being dynamic to fit it's open space.
Here's a picture to demonstrate what it looks like now:
The red border is the container, and the blue border div is the one I want to expand to stretch as wide as it can so the yellow div is always almost touching the right border of the parent.
Thanks!
#body
{
border: 1px solid red;
min-height:800px;
width:auto;
margin-left:50px;
margin-right:50px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:auto;
margin-left:5px;
margin-right:5px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
.advert
{
}
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea">sdfg<h1>asdasd</h1></div>
<div id="advertisingarea">
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
</div>
</div>
Since display:table-cell is now universally supported in all modern browsers you might as well use that: http://jsfiddle.net/Lbpeh/1/
HTML
<div id="root">
<div id="left">
Left
</div>
<div id="middle">
Middle
</div>
<div id="right">
Right
</div>
</div>
CSS
#root {
display:table;
border-spacing:0;
width:100%;
height:500px;
}
#root > div {
display:table-cell;
}
#left {
background:red;
width:25%;
}
#middle {
background:green;
}
#right {
background:blue;
width:100px;
}
Keep in mind that table-like layout has some issues of its own, but what you're essentially trying to achieve is the behaviour of tables with semantically more correct markup. That's what display:table-cell is for.
There are quite a few:
http://www.codeproject.com/KB/HTML/relatively_simple.aspx
http://www.tjkdesign.com/articles/3cols.asp
http://www.alistapart.com/articles/holygrail
3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)
Related
I'm trying to get some floated elements to appear outside of a container on a drupal page that is using a theme based on Omega. my page is currently structured as such:
<h2>Some header text</h2>
<div class="grid-12 region region-content center" id="region-content">
<div class="container-12">
<div class="pricing-main-background">
<div class="grid-4 plan-box-orange">
</div>
<div class="grid-4 plan-box-green">
</div>
<div class="grid-4 plan-box-orange">
</div>
<div class="pricing-subtext">
some more text down here
</div>
</div>
</div>
</div>
Here's a sketch of what I'd like to accomplish (notice the smaller boxes outside of the container):
Visual Aid
Can anyone help provide a way to make this work (preferrably that doesn't require a mess of CSS when the boxes stack (at 480px)?
Something like this?
h2
{
width:60%;
border:1px solid black;
border-bottom:0;
margin:0 auto;
text-align:center;
}
.grid-12
{
width:60%;
border:1px solid black;
margin:0 auto;
text-align:center;
}
.pricing-main-background {position:relative;}
.plan-box-orange {background:orange;}
.plan-box-green {background:green;}
.grid-4
{
display:inline-block;
width:30%;
height:50px;
margin-top:25px;
}
.grid-4:nth-of-type(1)
{
position:absolute;
left:-10%;
}
.grid-4:nth-of-type(3)
{
position:absolute;
right:-10%;
}
I'm a newbie with html so please be patient.
I'm trying to align 4 divs in parallel where the first,third and fourth div are static,the second div is empty and i need it to occupy the remain place e.g "width:auto".
I don't want to use table to solve the problem.
Is there a way to solve it using divs?
HTML:
<div class="container">
<div class="content" >
first
</div>
<div class="empty">
</div>
<div class="content">
third
</div>
<div class="content">
fourth
</div>
</div>
CSS:
.container{
strong textwidth:1020px;
height:40px;
}
.content{
position:relative;
background-color:#2cc2e7;
height:40px;
width:142px;
float:right;
margin-right:5px;
}
.empty{
background-color:#f1d486;
height:40px;
width:auto;
margin-right:5px;
}
You will need to change the order of the elements:
<div class="container">
<div class="first content">first</div>
<div class="content">third</div>
<div class="content">fourth</div>
<div class="empty"></div>
</div>
And then just float the first one to the left, other two to the right, and the .empty one, don't float it but set an overflow to auto —or hidden.
.content {
float: right;
width: 142px;
}
.first {
float: left;
}
.empty {
overflow: auto;
}
http://jsfiddle.net/GTbnz/
If you are prepared to add below the empty div then you could use the following:
<div class="empty">
</div>
with a style sheet of:
.container {
width:1020px;
height:40px;
display:table;
width:100%;
}
.container div {
height:40px;
display:table-cell;
}
.content {
background-color:#2cc2e7;
width:142px;
max-width:142px;
}
.empty {
background-color:#f1d486;
}
This was whichever of the 4 div's has a class 'empty' will auto-expand to fill the available space and the other div sizes will all be 142 px.
I have a strange situation, where my middle div is slightly downward.
Here's a screenshot:
HTML :
<div id="footer">
<div class="content">
<div id="info1">
<img src="img/temp.png" alt="About me" />
<h4>About Me</h4>
<p>this is about me section</br>and this is the other line</br>and this is a third line</p>
</div>
<div id="info2">
<h4>Random Photos</h4>
<div id="randomPhotos"></div>
</div>
<div id="info3">
<h3>Follow Me</h3>
<div>
<img src="img/temp.png" alt="facebook" />Facebook
</div>
<div>
<img src="img/temp.png" alt="twitter" />Twitter
</div>
<div>
<img src="img/temp.png" alt="email" />E-mail
</div>
</div>
</div>
</div>
CSS:
#info1, #info2, #info3
{
padding: 10px;
display:inline-block;
}
#info1
{
width:20%;
}
#info1 img
{
margin-right:3px;
width:20px;
height:20px;
background-image:url('../img/glyphicons-halflings.png');
background-repeat:no-repeat;
background-position:-162px 1px;
}
#info1 img, #info1 h4
{
display:inline-block;
}
#info2
{
width:55%;
border-left:1px solid gray;
border-right : 1px solid gray;
}
#info3
{
width:15%;
}
#info3 img
{
width:20px;
height:20px;
margin-right:5px;
}
#info3 img[alt="facebook"]
{
background : url('../img/result.png') no-repeat 0px -30px;
}
#info3 img[alt="twitter"]
{
background : url('../img/result.png') no-repeat 0px -60px;
}
#info3 img[alt="email"]
{
background : url('../img/result.png') no-repeat 0px 0px;
}
#info2 div
{
padding:3px;
}
#randomPhotos
{
height : 100px;
}
I'm really not that good at CSS, so it maybe a small problem. I just can't find it out.
Most browsers, for elements using display:inline-block will automatically use vertical-align:baseline on that element unless you use a CSS reset (that will probably also define the defacto standard as vertical-align:baseline.)
This is the reason for what you are seeing, each one of your info divs is aligning to the baseline. As the central div is smaller height wise you get the gap you are seeing at the top.
To fix it:
#info1, #info2, #info3
{
padding: 10px;
display:inline-block;
vertical-align:top;
}
The second problem you will probably encounter is that now it is aligned top, you have a 'gap' at the bottom with no left or right borders. Either have the borders managed by the full height divs or make all the divs the same height.
I suggest you to add float: left to each of your divs. This solve your problem.
example
You could also try to
position:absolute;
the divs inside the container and then specify
top:0px;
left: (left div with)px;
I am always working with absolute, hope it helps.
#info2
{
vertical-align: top
}
should do the trick.
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>
I've looked at so many posts on this I'm at a loss as to why its not working for me.
.firstCell
{
float:left;
width:40%;
text-align:right;
align:right;
border:1px solid white;
}
.cell
{
float:left;
width:auto;
align:left;
text-align:left;
border:1px solid white;
}
.newRow
{
clear:both;
width:100%;
}
.container
{
width:100%;
background-color:#DEEFF8;
margin:0px auto;
}
So, I basically have this:
<div class="container">
*Within this I have sections of like a form*
<div style="width:400px;border:1px solid black;">
<div class='firstCell'>File Name:</div>
<div class='cell'><html:text property="fileName" /></div>
<div class='cell' style='color:red;'>(Max 50 character)</div>
<div class='newRow'></div>
<div class='firstCell'>Copy Book Name:</div>
<div class='cell'><html:text property="copyBookName"/></div>
<div class='newRow'></div>
<div class='firstCell'><html:button property="populateFields" value="Populate Fields" onclick="showFields();"/></div>
<div class='newRow'></div>
<div class='newRow'></div>
</div>
*So this is one section, what I would like to happen is to position my form elements in this and then have it all be centered on the main div
</div>
Your main .container has 100% width, it doesn't matter if you center it, it will still start drawing it from the very left. The div inside of it that's responsible for the left-aligned box has no id/class, and you're doing no aligning on it. Technically your main container is centered, but everything inside of it is left-aligned.
Do you mean like this? http://jsfiddle.net/36ujG/
It's a little hard to understand what you are trying to center. All I did was added margin: 0 auto to the child div of container.