Here's the basic layout of a page I'm working on:
alt text http://www.mfrl.org/images/pagelayout.png
What would be the best/easiest way to order the divs?
C may or may not be visible (it's a news alert that only displays when there is news).
A = Header, B = Menu, E&F = standard content columns, D = latest blog post.
I'm thinking ABCEFD might make the most sense, but I could also see ABCDEF. Either of those should be fairly easy to do right using floats... is there a better way? Maybe put CEF inside a "middle column" div?
You'll probably have to do something closer to ADBCFE.
Remember that divisions floated to the right have to appear first, then divisions floated to the left, then the main division that will expand between them. So A will obviously be first. Then D will float to the right, B will float to the left. It is a good idea to use a separate division for the middle and put C at the top followed by F floated to the right and E floated to the left, or however you want those two to work out in the middle there.
Consider accessibility when choosing what order to put your divs in the document. For example, screen-readers tend to read from top-to-bottom in markup order, so putting the content (C, E, F, D?) earlier in the page may be better.
If you can't make a workable CSS layout with your content arranged that way, at least consider adding a link with a target that jumps to the content so that people who use screen readers navigate your site more efficiently by jumping over the (presumably static) header and menu when viewing multiple pages on your site.
I would make a header div = a and a body div {b,c,d,e,f}. Inside the body div i would group {e,f} or maybe {c,e,f} in a div
But thats just my 2 cents
There are many ways to do this. Here is what I would do:
<div id="header"></div>
<div id="A"></div>
</div>
<div id="main">
<div id="left">
<div id="B"></div>
</div>
<div id="center">
<div id="C"></div>
<div id="E"></div>
<div id="F"></div>
</div>
<div id="right">
<div id="D"></div>
</div>
</div>
Related
Css noob here in need of some advice.
I have a form that sometimes has 2 divs side-by-side (with input/labels inside/validators). Any further divs after this don't format correctly, not even with a clearfix.
[div] [div]
--> clear div goes here
[ div ]
I've fixed it with another Div with css {clear:both;} but this is superfluous. Whats more I've found that IE needs a height on the clear div to honour any margin on the lower div.
Is there a better method of dealing with this?
It's tough to see exactly what issue you're having without seeing the code, but hopefully this helps.
<div class="one" style="float: left;"> This div is floated left </div>
<div class="example1" style="clear: left;">this is text in example 1</div> <!-- notice clear left means this dive will appear after the float, no matter how much stuff is in the float -->
if class one is floated left, then example 1 would appear right next to it, but in this case you cleared the float to the left (which is class one) so example 1 appears below your floated object.
I've been searching for this solution for a while now... [bla bla... google.. bla]...
I have created an example where I'm almost there, but not quite:
http://www.mikael-sandbox.com/puzzlecss/
What I have left here is that I want the number 1 to always be in the lower right corner. This is the case as long as I have ONE single row of blocks, but as the row breaks, the row is moved up. I want it to stay down. Any thoughts?
If the elements are being dynamically added to your page (even if they aren't), it would seem that the obvious solution would be to reverse the order of them. The elements that would extend beyond the bounds of the container are going to always wrap below. Found a couple links that may offer some insight regarding float and wrapping.
http://archivist.incutio.com/viewlist/css-discuss/33948
http://css.maxdesign.com.au/floatutorial/introduction.htm See "Where will a floated element move to?"
Edit
Is your container fixed width, and will your bit divs be consistent width? If so, then you know you can fit X number of bit divs on a row in your container. With that in mind, you would wrap a "row" in a div, and clear it on both sides. The sample below achieves the results I believe you are looking for. I'm fairly certain that you will not be able to achieve this with pure CSS. Floats just don't work the way you want them to.
<div id="container">
<div id="row_wrapper" style="clear:both;">
<div class="bit">10</div>
<div class="bit">11</div>
<div class="bit">12</div>
</div> <!--End row_wrapper -->
<div id="row_wrapper" style="clear:both;">
<div class="bit">1</div>
<div class="bit">2</div>
<div class="bit">3</div>
<div class="bit">4</div>
<div class="bit">5</div>
<div class="bit">6</div>
<div class="bit">7</div>
<div class="bit">8</div>
<div class="bit">9</div>
</div> <!--End row_wrapper -->
</div> <!--End container -->
I've worked with CSS enough that I can get columns to work alongside content if I have a set number of columns: I simply define the sidebar(s) in the HTML prior to the content, and specify that they float to the left or right, while giving the content a margin-left or -right such that it doesn't flow into the space below the end of the sidebar.
I have a new challenge though, whereby the number of columns may vary between pages. In my HTML, I don't want to specify the sidebar content prior to the main page content though, which is the only way I know how to do it.
Essentially, I want the HTML to look like this:
<div id="container">
<div id="content">
<!-- Main body content goes here. -->
</div>
<div class="sidebar">
<!-- Sidebar DIV should appear to the right of the content DIV. -->
</div>
<div class="sidebar">
<!--
Another sidebar DIV, with this one *preferably* appearing to the
right of the one above, since it appears lower in the code and is
assuming LTR. I'm open to CSS that makes this sidebar appear to
the left instead of the right, however.
-->
</div>
<!-- Any number of additional sidebar DIV's can appear here. -->
</div>
I'm not sure if I should be trying to float the content/sidebar DIV's, make them position absolute, specify the width, etc. to make the content stretch automatically with the variable number of sidebars. It's probably worth noting that the size of each sidebar will be constant.
div.sidebar {
width: 100px;
}
On final note: if there's an improvement I can make to the HTML that will help, (e.g.: surrounding all the sidebar DIV elements in a parent DIV such as <div id="sidebars">), I'm open to suggestions there as well.
I guess I'll have to accept the fact that this requires HTML tables since no one can offer a CSS solution for this.
http://dev.dealercontrol.net/dealercontrol/index_comp1.html
on this page I am trying to float a flag to the left of the subtitle
<div>
<div class="flag certified">Certified</div>
<div class="subtitle left">Deal On 09 Black Lamborghini LP560</div>
</div>
I can't seem to get the flag to layout properly what would be the best method to do so? also how can I set the height of the flag to wrap tight on the text inside of it?
Good lord man.
You have soooooo much CSS going on on that page it's no wonder you're tying yourself in knots. Just look at the huge stack of inherited and overridden styles on any element with firebug.
First off a simple float:left will do the trick but it will only work if the two elements have a combined width narrower than their parent container - otherwise what else can happen but it wraps?
Secondly, your code above isn't actually what's on the page. Too many container divs getting in the way - simplify and move the two required elements as sibling nodes of the same parent and give both float:left.
Thirdly, reduce your bloat! .clear classes are pure bloat (see here). You really don't need more than 2 CSS files (a global base and a page extension) so condense and merge your files. Cut out as much of the tag selector styles as you can (this is what creates all the inherited/ignored stacks which are getting you into an unmaintainable hard to decipher position). Hopefully at that point you have a working design and a lighter more responsive page you can debug more easily in future.
Put the flag inside the div and float it to the left
<div>
<div class="subtitle left">
<div class="flag certified" style="float: right">Certified</div>
Deal On 09 Black Lamborghini LP560
</div>
</div>
ok this header image is driving me crazy-- ive cleaned up the divs and edited the css - before i learn positioning etc, id love to see a quick fix that just puts that image down at the bottom of the page
sorry, the question was in the title-- im trying to get the footer not to float on top of the page but ive gotten some responses about absolute positioning so ill try and work on that myself, additional answers still appreciated, thanks
http://we-live.in/the_sierra
<div style="text-align:center;">
<div id="footernav">
Home
About Us
Contact Us
</div>
Your main content div appears to be the div with the id "to_div". Your footer floats to the top because you've used position:absolute on to_div which takes it out of the flow. Either absolutely position your div on the bottom or stop using absolutely positioning. I recommend the latter.
That happens because you have set up to absolute the position of each div (to_text, nav_deals, etc.) but the div that contains the footer is rendered as a normal div element (because its position is not absolute)!
I suggest to redo this simple layout without the absolute positioning! Or you can solve by setting to absolute even the position of the last div!
The problem is that you are using absolutes. Absolutes do not affect the flow (in other words for the positioning of other elements it's as if they don't exist).
Do something like this (I've put the css as text)
<div id="wrapper">
<div id = "main">
<div id="to">FLOAT:LEFT</div>
<div id="from">FLOAT:RIGHT</div>
<p class="extro">CLEAR:BOTH</p>
</div>
<div id="footer"></div>
</div>