4

I want to have something like StumbleUpon for my website to view external articles. There's a sidebar for comments, etc. Here's jsfiddle the for it.

what i've done

HTML

<div id="header">Head</div>
<div id="sidebar">Sidebar</div>
<iframe id="article" src="http://cnn.com"></iframe>

CSS

html,body{width:100%;height:100%;overflow:hidden;}
#header{width:100%;height:49px;border-bottom:1px solid #000;}
#sidebar{height:100%;width:249px;border-right:1px solid #000;float:left;}
#article{border:0;overflow:visible;float:right;}

JS

$('#article').height($('html').height()-50).width($('html').width()-$('#sidebar').outerWidth()-1);

I found many ways to implement this layout, including floats, position:absolute, padding, table (definitely not), etc. What's the best way to implement this in terms of compatibility and speed?

9
  • 6
    Questions about improving already working code should really go to codereview.stackexchange.com Feb 20, 2012 at 20:57
  • I found that each method have their flaws, so I'm posting it here. Floats are laggy with slow CPUs, position:absolute doesn't work well in touchscreen devices, and padding behaves differently in IE.
    – Leo Jiang
    Feb 20, 2012 at 21:01
  • @Linksku If you have the correct doctype set, IE will have the same box model as other browsers.
    – tybro0103
    Feb 24, 2012 at 5:26
  • 3
    "The best way" is a fairly subjective term here
    – darryn.ten
    Feb 24, 2012 at 9:25
  • I don't understand what you're asking for. "compatibility" - with which browsers/versions? "speed" - what are you testing with that speed becomes an issue for a simple layout like this? Are you talking about it lagging when you resize the window?
    – thirtydot
    Feb 24, 2012 at 10:28

7 Answers 7

1

HTML5, works IE7 and up (thanks to html5shiv).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">  
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <style>    
        body,html{
          padding: 0;
          margin: 0;      
        }

        header{    
          height: 49px;
          border-bottom: 1px solid black;
          background-color: #fdd;
        }

        nav {
          position: absolute;     
          width: 249px;
          top: 50px;
          bottom: 0;
          left: 0;
          background-color: #dfd;
          border-right: 1px solid black;
          overflow: hidden;
        }

        body > section {
          position: absolute;
          top: 50px;
          right: 0; 
          bottom: 0;
          left: 250px;
          overflow: auto;
          background-color: #ddf;
        }
    </style>
</head>    
<body>

    <header>
        Header
    </header>  

    <nav>
        Sidebar
    </nav>

    <section>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>      
    </section>

</body>
</html>
1
  • Can use aside if you prefer it to be more universal. But sidebars are most times used for site navigation.
    – tomups
    Mar 1, 2012 at 21:59
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title></title>

  <style>

  body,html{
    padding: 0;
    margin: 0;
    height: 100%;
    cursor: default;
    overflow: hidden;
  }
  #divContainer{
    position: relative;
    height: 100%; 
  }
  #divHead{
    position: relative;
    height: 100px;
    border-bottom: 1px solid #ccc;
    background-color: #eee;
  }
  #divMain{

  }
  #divSidebar{
    position: absolute;
    background-color: #eee;
    border-right: 1px solid #ccc;
    width: 250px;
    left: 0;
    top: 101px;
    bottom: 0;
    overflow: hidden;
  }
  #divContent{
    position: absolute;
    left: 251px;
    top: 101px;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
  }


  </style>  

</head>                                                              

<body>

  <div id='divContainer'>

    <div id='divHead'>
      Header
    </div>

    <div id='divMain'>
      <div id='divSidebar' >
        Sidebar
      </div>
      <div id='divContent' >
        Content    
      </div>
    </div>

  </div>

</body>
</html>
0

In response to your comment: "I'm mainly looking for (in approximate order of importance) compatibility, usability, speed, and clean codes."

Compatibility: This does seem to be your main concern. Another comment of yours says: "Floats are laggy with slow CPUs, position:absolute doesn't work well in touchscreen devices, and padding behaves differently in IE." As tybro0103 pointed out in his comment, padding with IE should not be an issue with proper doctype. Regarding speed of float rendering, see "Speed" below. Your concern for position: absolute would seem valid, and probably best avoided--but other than that, any other method is not likely to have any real compatibility issues.

Usability: I'm not sure what you mean by that, since you have limited the layout already with "this particular layout," and usability is really more a layout issue (not the structure behind the layout).

Speed: I think speed is going to be much more affected by the content of what is in header, sidebar, and the article (especially if the article is linking offsite) than the structure and minimal css used to create the basic layout. Even if floats render slightly slower on slow CPUs (I've never heard that issue before, but doesn't everything render slower on a slow CPU?), large images, massive javascript, etc. are going to slow down the display of the page far slower than a css float declaration.

Clean Codes: Your original fiddle was pretty clean. Three html items with four minimal bits of css is about as compact as you can get.

2
  • Exactly why is position:absolute a valid compatibility concern? It’s fully supported everywhere except some edge cases in IE5/6. Mar 1, 2012 at 0:44
  • @David--According to a comment by the OP, "position:absolute doesn't work well in touchscreen devices." I don't know if such is true or not, but if so, and he desires to accommodate those, then he has a valid concern.
    – ScottS
    Mar 1, 2012 at 15:12
0
<style>
  #side_bar {
    width:200px;
    float:left;
  } #body_con {
    overflow:hidden; /*expands to fit in sidebar*/
  } #main_content {
    margin-left:200px;
  }
</style>

<div id="header"></div>
<div id="body_con">
  <div id="side_bar"></div>
  <div id="main_content"></div>
</div>

Simple as that.

4
  • 1
    there aren't any floats in your suggested style though?
    – darryn.ten
    Feb 24, 2012 at 9:25
  • Looks like you have an extra closing div with body_con and I don't see any styling for the header?
    – ScottS
    Feb 27, 2012 at 14:27
  • @ScottS another typo, fixed. and the header doesn't require any styling for it to fit in place
    – tybro0103
    Feb 27, 2012 at 15:52
  • I guess the lack of styling in header would be @Linksku's discretion. My impression from his layout requirements was a 100% body height with a fixed height header and the "leftover" being available for sidebar and article. Your solution would put a scroll bar for the page (not just the article) if it is long (which he seems to want to avoid based on his original fiddle). That's just my interpretation of his layout requirements. It could be the 100% body height is not critical for him.
    – ScottS
    Feb 27, 2012 at 16:06
0

A nicer solution would be to load the content into a container div rather than using an iframe and all the problems that arise with that (2 scrollbars for the window/iframe)

Why not use javascript to pull the page content in with AJAX. You can also preload the next sites after the current page is loaded to help save time.

Your layout looks ok, but perhaps make the sidebar / header a slide-out so that you maximise the target site on your page - the stumble upon header is fairly unobtrusive and this is what you should aim to mimic.

0

I’ve never had a compatibility issue with position:absolute on touch devices, are you sure you are not confusing it with fixed? Also, padding works great in all browsers unless you set IE in quirks mode, and you definitely don’t want that for a lot of reasons.

I would use position:absolute in your layout, it makes sense since you are squeezing everything inside the body without having a natural flow of scrolling.

Absolute positioning also have a great advantage; you can f.ex do left:250px;right:0 and it will expand the available area with a 250px left margin. I think this is a more logical way of programming a fluid layout inside a container instead of hacking negative margins and such using floats.

Another important aspect: using absolute positioning, you would also be able to move the article DIV above the sidebar in the content order. This is something many people forget, in most cases it makes much more sense for screen readers and search engines to get to the content as quick as possible.

The downside of it is that IE6 and below don’t play ball, but there are simple workarounds explained in this article (as you will see).

Using floats is still an option, but as I mentioned, it might cause more headache since they are designed to be a part of a natural layout flow.

I would also put the iframe inside an #article div, it makes more sense to separate it from the layout grid.

Something like this

<div id="header">Head</div>
<div id="article">
    <iframe src="http://cnn.com"></iframe>
</div>​
<div id="sidebar">Sidebar</div>

And the CSS:

html,body {
    width:100%;
    overflow:hidden;
}
#header {
    position:absolute;
    left:0;
    right:0;
    height:49px;
    border-bottom:1px solid #000;
}
#sidebar {
    position:absolute;
    top:50px;
    bottom:0;
    width:249px;
    border-right:1px solid #000;
}
#article {
    position:absolute;
    top:50px;
    left:250px;
    right:0;
    bottom:0;
}
#article iframe {
    border:none;
    width:100%;
    height:100%;
}

Finally some magic for IE5 & IE6 (if you want to go that far):

<!--[if lt IE 7]>
<style>    
body, #header { width:100% }
#sidebar, #article{ height: expression(document.body.clientHeight-50) }
#article{ width: expression(document.body.clientWidth-250) }
</style>
<![endif]-->

In terms of compatibility, this should be about as compatible as it gets. It works without javascript and it’s fluid (or "responsive" as it’s called now) so it should work across many different screen sizes. You might want to add some media queries to shuffle the layout on the smallest screens though, depending on how you do your zooming defaults.

When it comes to speed, there is one big bottleneck regarding rendering speed, and that is DOM manipulation using javascript. Just leave that out and you’ll be fine using whatever CSS technique you want. (Agreed, the IE5/6 expression is not the speediest rendering method available, but it works fine and we are talking serious legacy support here...)

On could argue that using HTML5 elements such as HEADER, ASIDE and ARTICLE would be suitable, but you would need a HTML5 shim script to make that work in some IE versions, and then you loose some compatibility for those without javascript installed.

1
  • You might also need to adjust the iframe settings for IE7- to maintain a 100% high frame height, but I’m not sure that you actually mean to use iframe or if it’s a placeholder for something else. Feb 29, 2012 at 13:49
-1

I would position the header absolute, float the sidebar and the content box left;

The sidebar would be sharper if you used something like lionbars.js or js.scrollpane to help save space and aesthetics .

1
  • Why position absolute? You'd have to add padding unless you wanted the header to sit on top of the other divs. I don't think this is answering the OPs question anyway Mar 1, 2012 at 9:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.