I typed this
#center-1, #center-2, #center-2, #center-3, #center-4,
#center-5, #center-6, #center-7, #center-8 { float: left; width:360px; }
HTML:
<div id="centerColumn">
<div id="center-1"></div>
<div id="center-2"></div>
<div id="center-3"></div>
<div id="center-4"></div>
<div id="center-5"></div>
<div id="center-6"></div>
<div id="center-7"></div>
<div id="center-8"></div>
</div>
and it doesn't work, why?
Guessing from your report that it "doesn't work", you're probably just not seeing the divs because there is no content, height, or padding. Add height:10px; or something, and some background - they will show up.
By the way, there's a slightly easier way to write this selector in your case:
/* Select all <div>s in the #centerColumn */
#centerColumn div {
float: left;
width:360px;
/* Test to make divs appear */
background:#f00;
height:10px;
margin:1px;
}
your divs do not have any content, that's why they are not visible. to make them visible add at least a into them, or add height/min-height to the css rule
Related
How can I create a 3 column CSS layout, with the left and right edges flush with edges of parent element? I want to be able to do this within a liquid layout, so no fixed widths.
This sounds like it should be easy, but the best thing I can come up with is quite a hack.
<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>
...
<span class="c3">
<span class="left"> ...
</span>
<span class="center"> ...
</span>
<span class="right"> ...
</span>
</span>
You can see it here, this works okay (in my browser at least) but it just feels wrong. Is there a better way to do this?
Since there seems to be some confusion about what I'm trying to do, here it is in context. I run into this fairly often, where I already have a page layout and I want three columns within that layout. I want the three columns to be "fully justified," and I want things to be liquid, because even thought the page has a fixed layout, there's usually a facebook app or something also and I like to reuse as much as possible. Here's the latest example of where I've run into this (bottom of the page).
I'm not worried about SEO, the content is usually in 1-2-3 order of importance. I don't really care if they're all the same length. I'd like to not use a ton of markup if possible. My main goal is to have the left and right edges flush with the parent element, and and equal amount of space between each column.
I could try to write a new layout for you or fix the one you started, but I feel like I should just point you to a good source for the layout you're after:
The Perfect 3 Column Liquid Layout (Percentage widths)
No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I have used this resource for many years and it's rock solid, even in IE6. Make sure to click around to see all the examples, and read the article so you understand how it works.
This is an image of the basic layout structure (not the actual output):
It uses some crafty relative positioning and SEO-friendly 2-1-3 source order. Full height faux columns, fixed-width or fluid columns...
I cannot recommend this resource enough, I hope you enjoy it.
OK, sounds like you just want a lightweight alternative to your already-working solution.
Per our discussion in chat, I'm posting the mini-template I created:
<div class="wrapper">
<div>1</div>
<div>2</div>
<div class="last">3</div> <!-- or use CSS3 :last selector -->
</div>
.wrapper {
width:500px; /* any width OK */
float:left;
}
.wrapper div {
width:30.65%; /* not perfect, but close */
padding:1%;
margin:0 0 0 1%;
float:left;
}
.wrapper div:first-child { margin:0; }
/* make up for imperfect 1/3 width rounding */
.last { float:right;margin:0 }
Demo: http://jsfiddle.net/bH8vY/2/
Best of luck.
As far as I can tell, the solution I gave in the question is the best answer for this. I haven't found any other suggestions since posting this that would achieve what I want.
I'll reiterate it here so the question can be closed.
<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>
...
<span class="c3">
<span class="left"> ...
</span>
<span class="center"> ...
</span>
<span class="right"> ...
</span>
</span>
This might be what you want/help you; I've made a layout that uses css to emulate dynamic table behaviour [using divs]. It works in Chrome, Firefox and IE>7.
DEMO, have a go at resizing the window. That middle bit is what you want, I think.
Have a fiddle with it. Uncomment the border css line to see whats going on.
Code:
<div class="view" style="height:100%; width:100%">
<div class="north">
n
</div>
<div class="middle">
<div class="west">
w
</div>
<div class="centre">
c
</div>
<div class="east">
e
</div>
</div>
<div class="south">
s
</div>
</div>
html, body {
height : 100%;
margin : 0;
}
.view,
.view > .middle {
display : table;
}
.view > .north,
.view > .south {
height : 1px;
display : table-row;
}
.view > .north { vertical-align : top; }
.view > .south { vertical-align : bottom; }
.view > .middle > div {
display : table-cell;
}
.view > .west,
.view > .east {
width : 1px;
}
/*div { border : 1px solid black; }*/
Simple markup, no JS, and dynamic layout.
Right now I have something like this:
<div id="pagebody">
<div id="left-entries"> </div>
<div id="right-entries"> </div>
</div>
<div id="footer">
....text....
</div>
left-entries and right-entries have float: left; so that they show up beside each other within pagebody.
pagebody has margin-left: auto; margin-right: auto; so that it sits in the center.
How can I get footer to ALWAYS show up under pagebody? Right now it is positioned somewhat behind everything. I have a feeling it is because pagebody doesn't have a defined height (because the height is defined by what is inside it and that's variable depending on the content).
Any ideas?
If you add clear:both; to #footer it will always be below the pagebody
I would recommend clearing your floated DIV's. You can do this by adding a "clear" class any parent elements that contains any floated children. I think this works best, because it's less markup in your HTML. (via Nicolas Gallagher)
For example:
<style>
.clear:before, .clear:after { content:""; display:table; }
.clear:after { clear:both; }
.clear { zoom:1; } /* IE 6/7 (hasLayout) */
</style>
<div id="pagebody" class="clear">
<div id="left-entries"> </div>
<div id="right-entries"> </div>
</div>
Should clear anything below the #pagebody DIV.
You have to clear it.
clear: both;
I have no idea why, and this seems illogical, but for some reason the text in one div affects the position of another. The difference in the number of lines the text takes up offsets the height of a div with fewer lines. These divs are side-by-side inline boxes, so it really shouldn't do that period. Not only that, but they have fixed dimensions. I have no clue why this is happening but it ruins my design. Here's the code, stripped down to the problem without anything else in it.
<div class="box">
<div class="main">
<br><i>"Message"</i>
</div>
</div>
<div class="box">
<div class="main">
<br><i>"Message that is longer than the other message."</i>
</div>
</div>
<style>
table {
width:100%;
}
div.box {
background:#ccc;
border:1px solid #000;
display:inline-block;
height:100px;
padding:4px;
margin:4px;
width:100px;
}
</style>
My browser is Google Chrome, latest release.
You need to add vertical-align: top to div.box.
Demo without: http://jsfiddle.net/ucE8r/
Demo with: http://jsfiddle.net/ucE8r/1/
See here:
http://www.brunildo.org/test/inline-block.html
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
I've been fiddling with asp.net mvc 3 with the new razor view engine.
My goal is to have a fixed-fluid 2 column layout with a jqGrid in each column. I'm having no luck though! As soon as I add a grid to the right column its header goes huge. I don't think its jqGrids fault because if i remove the styles both grids display as expected.
I see that the css for the jqGrid applies display: block to the header as part of the ui-helper-clearfix class.
Anyone have any suggestions to get this to work or other fixed-fluid css i could experiment with (I've tried a bunch of templates from online with no luck)?
Code from the template file:
... <style type="text/css">
#left { float: left; width: 400px;}
#content { margin-left: 400px;}
</style>
</head>
<body>
<div>
<div id="left">
#RenderSection("SPTreeGrid")
</div>
<div id="content">
#RenderSection("ClientPickerGrid")
</div>
</div>
</body>
Update:
My page actually needed to display 2 grids in fixed width on the left and a fluid one on the right.
It was an issue with my css (I still dont know why) but I ended up using the following layout which works (rail is the left column):
#container{
overflow:hidden;
padding-left:400px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content
{
width:100%;
border-left:400px; /* The width and color of the rail */
margin-left:-400px;
float:right;
}
#rail{
width:400px;
float:left;
margin-left:-400px;
display:inline; /* So IE plays nice */
}
cshtml:
<div id="container">
<div id="content">
#RenderSection("ReportGrid")
</div>
<div id="rail">
#RenderSection("SPTreeGrid")
#RenderSection("ClientPickerGrid")
</div>
</div>
Although Oleg's suggestion does fix the height of the title, it does not constitute a solution -- at least not if you want the right div to be liquid and expand to the width of the browser window. The problem is that in order to use float:left on the right grid container, you must specify a width. Floated elements must have explicit widths associated with them (if not, they take on the width of the widest element inside them).
One work-around that worked for me is to set a height of the floated to something small (1px) and set an explicit height for the content of that div.
I have created a jsFiddle example that illustrates the problem and the work-around.
You should use
<div style="float:left">
<table id="list1"><tr><td/></tr></table>
<div id="pager1"></div>
</div>
<div style="float:left">
<table id="list2"><tr><td/></tr></table>
<div id="pager2"></div>
</div>
as the template for the grids. If you case it should be
<style type="text/css">
#left { float: left; }
#content { float: left; }
</style>
You should not forget to include "clear:left" in the style of the next div which should be after the grid if you want to brake the floating.
See demo with two grids here
What is the best approach to make 3 column fixed width cross browser compatible, accessible, semantically correct layout ?
<div id="wrapper">
<div id="header">
This is the Header
</div>
<div id="top-nav">
Top Navigation
</div>
<div id="leftcolumn">
Left Column
</div>
<div id="content">
content column
</div>
<div id="rightcolumn">
Right Column
</div>
<div id="footer">
This is the Footer
</div>
</div>
#wrapper {width:970px;margin:0 auto }
#header {height:100px }
#top-nav {height:30px}
#leftcolumn { }
#content { }
#rightcolumn { }
#footer {height:100px}
With this XHTML code what css should be written to make this 3 col layout.
cross browser compatible including
IE6 (without CSS hack or extra
conditional css for IE)
Width in Px
Centered
Font-sizing in em
Number of column can be extended or
removed 1-4,5 etc
SEO Enabled
Um, this is pretty darn easy with floats and faux columns.
Why do you have so many containers around the columns? You only need one. To clear the floats, do
#container {
width:960px; /* or 100%, or whatever. It needs to be set for it to work in IE tho */
overflow:auto; /* hidden works too */
background:url(./img/faux-columns.gif) repeat-y; /* google faux columns for A List Apart article */
}
and for the columns themselves
#col1 { width:520px; float:left; margin-right:20px; }
#col2 { width:200px; float:left; margin-right:20px; }
#col3 { width:200px; float:left; }
Use jQuery + its layout plug-in. Keep your full head of hair.