Clever Geek Handbook

Simple CSS MasterPage layout

I'm helpless, tried my best understanding of CSS, but it just isn't for me.

I would like to make a really simple MasterPage:

  • at the top of the div full width and height 40px (1)
  • at the bottom also a div full width and height 40px (2)
  • in the middle:
    • left: div width 200 px (3)
    • on the right side of the left div: div with contentPlaceHolder (4)

What I would like to get is: If I am building a site that uses my master page and place a panel in a contentPlaceHolder with a width of 800px, I would like my site to adjust to it - the top, middle and bottom divs are 1000px wide (200+ 800). I would also hate (and I have a huge problem with this) (4) to move down if I resize (shrink) the browser window - I would like all blocks to be locked.

This is my main html page:

<div>
    <div class="header">
    </div>
    <div>
        <div class="links">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="footer">
    </div>
</div>

What CSS should I write to make this finally work?

+2


source to share


3 answers


Not sure if you checked this or not, but we are using the YUI-Grids CSS Framework for our layouts. This prevents us from spending a lot of time on CSS and we are not very good at being developers.



There is even a grid builder that will allow you to graphically display the page and then copy and paste the required HTML to make that happen :)

+1


source


To prevent floating divs from being pushed out of the dropdown alignment, you usually use either width or min-width.

For example, in this code, the div containing links and content will never be less than 1000px. If the screen is less than 1000 pixels, a scroll bar is displayed.

<div style="min-width: 1000px">
    <div class="links"></div>
    <div class="content"></div>
</div>

You can also use width instead of min-width:



<div style="width: 1000px">
    <div class="links"></div>
    <div class="content"></div>
</div>

Difference between two simple ones: if you specify min-width, the CAN div will be larger if required. If you specify a width, the div will be exactly the size you specified.

Please be aware that minimum width is not supported by IE6.

+1


source


Here's a quick hit on the specific CSS / Markup for this problem.

Markup:

<!-- Header, etc. -->
<div class="contentView">
    <div class="links">
    </div>
    <div class="content">
    </div>
</div>
<!-- Footer, etc. -->

CSS

.contentView {
    /* Causes absolutely positioned children to be positioned relative to this object */
    position: relative;
}

.links {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

.content {
    padding-left: 200px;
}

You might want your footer to be "sticky". You can check it out here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

How relevant it is depends on what the design requires. This makes the link section more floating on the left than a column, for example.

It looks like this: (content is green, .links is red):

An example of this markup.

0


source






More articles:


All Articles