SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've set up a new Page Layout page to replace the Home.aspx of a standard Enterprise Wiki page.

Trying to be a good fellow (and not kill any puppies) I opted to go for div's to achieve my goals instead of tables. My setup is quite plain; two columns dividing the screen approx 60/40 between them, with a blog-like news list on the left and some webpart zones with links etc on the right, preferably floating nicely as the screen size is changed. I did something like this:

<div class="FrontPage">
<div class="LeftCol">News list stuff here</div>
<div class="RightCol">
    <div class="Section">
            <div class="IconGfx"><img src="url"></div>Web part zone 1</div>
    <div class="Section">
            <div class="IconGfx"><img src="url"></div>Web part zone 2</div>

Well, it's more, but hopefully you get the basic idea. I then styled the classes LeftCol and RightCol with display: inline-block to make them appear side by side, instead of stacked. It works as long as the screen is large enough, but if I shrink the window, the RightCol pops down beneath the LeftCol one.

If I risk a few puppies and do it with a table, I have no such problems. What am I doing wrong on the div styling?

Thanks for all your help!


share|improve this question

Set your FrontPage div to a fixed min-width. this will cause the page to scroll horizontally if made too narrow.

share|improve this answer
Ok. How small would it rationally have to be? I'm aiming at desktop/laptop sized screens, with about 1024 in total screen width? – tplive Jun 30 '11 at 11:01
1024 probably a good size for most laptops. – James Love Jun 30 '11 at 11:02
Ok, so then there is the SharePoint chrome to take into account. Would it be possible to make it all float? – tplive Jun 30 '11 at 11:05
What, ribbon & quick launch? Those are fixed, surely.. – James Love Jun 30 '11 at 11:09

First of all, your html isn't correct. But I suppose that's from simplifying your code?

Have you tried giving the div's width:60% and width:40% in your stylesheet (+ removing all paddings, margins, borders)?

share|improve this answer
I see I dropped a closing /div. I tried the 60/40 rule, but then they pop down no matter the screen size. Setting 59/40 allowed me to see it in full screen mode, but as soon as I shrink the size, it pops under. – tplive Jun 30 '11 at 10:58

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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