The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Doing a Fluid + Liquid Layout, with HR Tag?

  • # March 14, 2009 at 8:01 pm

    Hi Coding Fellows,

    This conundrum has put me to a halt. I think I know the answer, but I want to see if my <hr> tags can do the trick as I explain below.

    Here’s the start of the page >

    Here’s a mock up of what I’m going for here >

    You can see that my idea is to extend the navigation bar infinitely to the left and right, while still keeping the rest of the page in the center. I have used <hr> tags to style the navbar. I don’t know if I came up with this, but I’ve used it successfully on other designs before, but the difference here is that I’d like those <hr> tags to extended past the fixed layout.

    You can see that page is not fixed/centered. This probably has to do with the fact that everything is in a <div> wrap.

    My best guess is I’ll have to use small 1×1 pixel graphics in the nav bar to get it to extend. I would also have to place the nav bar and the main header <h1> outside of the wrap with absolute positioning/z-indexing.

    Bring on the feedback please!

    Please forgive me, I’m a little rusty since it’s been 3 months off the CSS wagon.

    Page Code

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">


    # March 14, 2009 at 8:51 pm

    first iframes and now hr’s within ULs… I think the sky is falling!

    Ok stop. thats a dirty dirty nasty way of doing it lol

    Firstly remove your hrs, and add a border-top to your UL box (which you should also set a fixed height and whatever width you are using) – then take 1px vertical slice of the background you are using and repeat it x down your UL.

    you could just take a slice of the background idea and repeat it forgetting about the boarder…

    HRs in ULs eek… lol


    # March 14, 2009 at 10:04 pm


    Thanks for the insight. My thought process was geared towards using a fluid layout, when you zoom in with an <hr> tag as a graphical line replacement the <hr> tag doesn’t blur or get distorted as an image would obviously. The <hr> also doesn’t get dropped when graphics are disabled. Yes, semantics, but would placing the <hr> tags outside the <ul> be so wrong? It’s good to know your perspective, and I’ll try your method out.

    Any more insight on the kind of layout that would efficiently work as I’ve mocked up? Thanks peeps. :)

    # March 15, 2009 at 5:52 am

    well if you have an image that is detailed or a gradient then yea it would get blured, but if you use an image that is physically pixel coloured they would be no noticeable change – especially if you use web safe colours.

    HR’s should be left for dividing or splitting up stuff, you should never use them for site stucture. Plus technically you are using them inside a UL without wrapping them in a LI, which is a little bit naughty. :)

    # March 15, 2009 at 3:03 pm

    Thanks again Robski. I’ve come up with a solution, and I’ll post it up here by the end of today for you to look at with your discernment if it’s not a problem.

    # March 15, 2009 at 7:30 pm

    thats no problem at all, post away :D

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed