If I have a div layout like this:
<div id="stretchyheader"></div>
<div id="fixedwidthwide"><div>
<div id="fixednarrow></div>
<div id="footer"></div>
Which makes something like this:
-----------------------------------------------------
| stretchyheader |
-----------------------------------------------------
| | |
| | |
| fixedwidthwide | fixednarrow |
| | |
| | |
| | --------------
| |
| |
| | patterned
| | background
-----------------------
- footer -
How do I ensure that both columns are the same height as the deepest column? The column heights are flexible according to the amount of content and have a white background.
A very simple, common way to do this is using Faux Columns.
You would have a structure that looked something like this:
<div id="stretchyheader"></div>
<div id="container">
<div id="fixedwidthwide"></div>
<div id="fixednarrow></div>
</div>
<div id="footer"></div>
And you actually apply a background image to #container to add any background colors, borders, etc. to each of the 2 columns.
There are CSS techniques to do this without faking it, but they are much more complex:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
http://www.socialgeek.be/blog/read/flexible-equal-height-columns
Adapted from here:
Create a container around the two fixed columns, and have css something like this:
#container {
float:left;
width:[sum of the two columns width];
}
#fixedwidthwide {
float:left;
width:[whatever];
}
#fixednarrow {
float:left;
width:[whatever];
}
Note that this is only necessary if the columns need to be of equal height for some reason. If not, you can just follow philfreo's suggestion and use faux columns.
There are a number of solutions for this problem, including OneTrueLayout Technique, Faux Columns Technique and CSS Tabular Display Technique.
The best solution for equally height-ed columns is the CSS Tabular Display Technique that means to use the display:table feature.
It works for Firefox 2+, Safari 3+, Opera 9+ and IE8.
The code for the CSS Tabular Display:
The HTML
<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>
The CSS
<style>
#container{
display:table;
background-color:#CCC;
margin:0 auto;
}
.row{
display:table-row;
}
.col{
display: table-cell;
}
#col1{
background-color:#0CC;
width:200px;
}
#col2{
background-color:#9F9;
width:300px;
}
#col3{
background-color:#699;
width:200px;
}
</style>
Even if there is a problem with the auto-expanding of the width of the table-cell it can be resolved easy by inserting another div withing the table-cell and giving it a fixed width. Anyway, the over-expanding of the width happens in the case of using extremely long words (which I doubt anyone would use a, let's say, 600px long word) or some div's who's width is greater than the table-cell's width.
The Faux Column Technique could be a solution to this problem, but it has some drawbacks such as, you have to resize the background tiled image if you want to resize the columns and it is also not an elegant solution.
The OneTrueLayout Technique consists of creating a padding-bottom of an extreme big height and cut it out by bringing the real border position to the "normal logical position" by applying a negative margin-bottom of the same huge value and hiding the extent created by the padding with overflow:hidden applied to the content wraper. A simplified example would be:
The HTML file:
<html><head>
<style>
.wraper{
background-color:#CCC;
overflow:hidden;
}
.floatLeft{
float:left;
}
.block{
padding-bottom:30000px;
margin-bottom:-30000px;
width:100px;
background-color:#06F;
border:#000 1px solid;
}
</style>
</head>
<body>
<div class="wraper">
<div class="block floatLeft">first col</div>
<div class="block floatLeft">
Second col<br />Break Line
</div>
<div class="block floatLeft">Third col</div>
</div>
</body>
</html>
In my opinion the unimplemented 100% height within an automated height container is a major drawback and the W3C should consider revising this attribute.
Other resources: link1, link2, link3, link4, link5 (important)
Related
I have a fluid layout made with collapsible divs. When they collapse, they leave an empty space underneath, which is automatically filled by the next div (they all have float: left). This however does not look good and I would like to maintain the "row structure" without loosing the ability to move the divs around (when the window gets smaller). JSFiddle here.
CSS snippet:
.clickable {
border: 1px dotted black;
width: 200px;
float: left;
height:50px;
margin-right:20px;
margin-bottom:20px;
}
HTML snippet:
<html>
<head><title>Layout test</title></head>
<body>
<div class="clickable"> 1 </div>
<div class="clickable"> 2 </div>
<div class="clickable"> 3 </div>
<div class="clickable"> 4 </div>
<div class="clickable"> 5 </div>
<div class="clickable"> 6 </div>
</body>
<html>
Is there a pure CSS solution? I would like not to mess with JavaScript. I know I can dynamically determine the number of columns and then wrap them into "rows", but I'm not willing to use this solution yet.
Change your float: left to display: inline-block. That's the only change I made to your fiddle, and seems to give the effect you're looking for.
http://jsfiddle.net/GLf7m/2/
I am new to laying out webpages without the use of tables, so my apologies if this is a really simple question.
I am attempting to create a header for a page which I want to look something like this:
-------------------------------------------
| | Some big text |
| img | |
| | Some smaller text |
-------------------------------------------
Currently I have the following div, but it does not bottom align the small text like I want:
<div style="height:50px;">
<img src="img.jpg" style="vertical-align:middle; height:100%; float:left"/>
<div style="vertical-align:top;">BigText</>
<div style="vertical-align:bottom;">SmallText</div>
</div>
How should I do this?
Thanks!
My version: http://jsfiddle.net/gT6ze/
Alternatively, you can use position:relative for container div, set padding:60px for it, and position image within it with position:absolute; top:0; left:0;. This way div elements with text can also be positioned inside parent by setting position:absolute and top:0 and bottom:0.
use the padding or margin for the small text div
<div style="height:50px;">
<img src="img.jpg" style="vertical-align:middle; height:100%; float:left"/>
<div style="vertical-align:top;">BigText</>
<div style="vertical-align:bottom;padding-top:15px;">SmallText</div>
</div>
demo
I need to layout a site that has three columns in this order:
leftColumn | mainColumn | rightColumn
leftColumn and rightColumn are both advert columns, and the mainColumn section contains all the SEO-rich content.
Therefore in the code I have placed the divs used for the layout in the following order so that the main content is seen first for SEO benefit:
<div id="mainColumn">
</div>
<div id="leftColumn">
</div>
<div id="rightColumn">
</div>
I have also done it this way so that if the user is browsing the page from a mobile they will see the main content first, not the adverts.
So my question is, how do style the columns so that they display in the correct order?
This is an HTML5 / CSS3 page.
You can do something like this as a starting point:
<div id="mainColumn" class="column">1</div>
<div id="leftColumn" class="column">2</div>
<div id="rightColumn" class="column">3</div>
.column {
position:relative;
float:left;
width:25%;
}
#mainColumn {
width:50%;
left:25%;
}
#leftColumn {
left:-50%;
}
Demo: http://jsfiddle.net/bn3t8/
This code is very basic and probably requires IE fixes and support for full-height backgrounds on the columns. You might want to check out this site for some more defensive strategies (highly recommend):
http://matthewjamestaylor.com/blog/perfect-3-column.htm
My apologies if similar questions already exist (I know they do), but I didn't really find what I was looking for and I'm getting crazy here. I want the solution to work on Chrome; compatibility with other browsers is optional.
Let me draw a picture of what I want, hoping my ASCII art won't get messed up. The line of xs represents the page width:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
,-----------. ,---.
| Contents | | | ,--------.
| | | B | | some C |
| A | | | `--------'
`-----------' `---'
A and B should be as close of each other as possible, and A should touch the left of my window. C should touch the right of my window. Between B and C is an empty area that varies with respect to the three elements sizes. If C has a smaller height than A or B, I want it to be centered vertically on the line. I'd like to not to use javascript for layout.
I tried many things, among which:
Tables won’t do it, because they distribute size evenly OR I need to fix dimensions, which I can’t (content is dynamic, although the sizes are in a fixed (probably definable) range)
Floated divs won’t be able to center their contents vertically unless displayed as table-cells, but then I cannot float them anymore.
(This sort of thing would be trivial in any modern GUI toolkit. Why are the web standards lagging so far behind?)
http://jsfiddle.net/zEaK9/
HTML:
<div class="left main">
<div class="container">
<div class="contents"></div>
</div>
</div>
<div class="center main">
<div class="container">
<div class="contents"></div>
</div>
</div>
<div class="right main">
<div class="container">
<div class="contents"></div>
</div>
</div>
CSS:
div{
height:100px;
}
.main{
display:table;
}
.left{
background:blue;
width:65px;
float:left;
}
.center{
background:green;
width:100px;
float:left;
}
.right{
background:orange;
width:65px;
float:right;
}
.container{
display:table-cell;
vertical-align:middle;
}
.contents{
margin:auto;
height:20px;
width:20px;
background:lightGrey;
}
What's wrong with a table?
This seems to do what you ask:
http://jsfiddle.net/btuwY/
The widths of A, B, and C are fixed, but they can be any values.
Put all three divs A, B, C in a container div, then specify div C's vertical-align as middle. The container grows to the maximum of all three sizes, and then C is placed where you want it. (Of course, you float A and B to the left, and C to the right).
I'm having trouble creating a layout that looks like a row in a table, I need it to look like:
--------- ---------------------------
| | Line of text |
| | Line of text |
| | |
--------- ---------------------------
so I'm trying something like:
<div>
<img src="" />
<div float=left>Line of text</div>
<div float=left>Line of text</div>
</div>
it's not coming out right, it looks like the lines of text don't take up the full height, as high as the bottom of the img. I want to solid-color the entire row, how can I do this?
Thanks
I agree with Scobal's comment....if what you are trying to display is tabular data, then it would semantically be correct to display it in a table.
If not, you could theoretically set the div's img float property to left, and then wrap both of your text divs in an outer div and float that one as well.
looks like a comment with an avatar or user data with avatar if I'm not mistaken.
<div class="user">
<img class="avatar">
<div class="user-info">
<p>line of text</p>
<p>line of text</p>
</div>
</div>
css:
.avatar {
width: <width here>.px;
float: left;
background: #ccc;
}
.user-info {
float: left;
}
Of course remember to clear your floats.
You can also substitute lists for the divs if you want it more semantic :P