0

I am using a template to learn more about fluid design

My main confusion at this point regards how structure and size is defined.

For example in the CSS, there is a header tag; but the actual area of the header/banner is not defined. Or is it? I cannot figure out how this is occurring.

The mark-up seems quite simple.

Please see HTML and CCS below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>The Perfect Fluid Width Layout</title>

    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="style-ie.css" />
    <![endif]-->
</head>

<body>

    <div id="page-wrap">
        <div id="inside">

            <div id="header">
                <a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
            </div>

            <div id="left-sidebar">
                <p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p>

            </div>

            <div id="main-content">

                <h2>Why is this layout "perfect"?</h2>
                <ul>
                    <li>Works in all major browsers</li>
                    <li><strong>Shrinks</strong> to 780px<br />This accomodates users with 800x600 resolution, with no horizontal scroll!</li>
                    <li><strong>Grows</strong> to 1260px<br />This accomodates users with 1280x768 resolution and everything in between.</li>
                    <li>This accomodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.</li>
                    <li>The left sidebar is of "equal height" to the main content</li>
                </ul>

                <br /><br />

                <p>
                Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit. 
                </p>

                <p>
                Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse. 
                </p>

                <p>
                In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim. 
                </p>

                <p>
                Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing. 
                </p>

                <p>
                Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait.
                </p>

            </div>

            <div style="clear: both;"></div>

            <div id="footer">
                <p>Footer stuff.</p>
            </div>

        </div>

        <div style="clear: both;"></div>

    </div>

</body>

</html>



* {
margin: 0;
    padding: 0;
}


body {
    font-size: 62.5%;
 background: url(images/stripe.png) repeat;
}


p, li {
    font: 1.2em/1.8em Tahoma, sans-serif;
    margin-bottom: 10px;
}


h1 {
    font: 2.0em Tahoma, sans-serif;
    color: white;
    height: 0px;
}


h2 {
    font: 1.8em Tahoma, sans-serif;
    color: green;
    margin-bottom: 10px;
}


ul {
    margin-left: 25px;
}


img {
    border: none;
}


#page-wrap {
    background: white;
    min-width: 780px;
    max-width: 1260px;
    margin: 10px auto;
    }

#page-wrap #inside {
        margin: 10px 10px 0px 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }


#main-content {
    background: url(images/left-sidebar.gif) repeat-y white;
    padding-left: 230px;
    padding-top: 20px;
}


#header {
    background: #444444;
    text-align: center;
}


#left-sidebar {
    width: 150px;
    float: left;
    padding-left: 15px;
    padding-top: 20px;
}


#footer {
    background: #267f23;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    color: white;
}
2
Contributors
5
Replies
22
Views
1 Year
Discussion Span
Last Post by mattyd
1

There's not a really a header tag used, but there's a div tag #header in the CSS & HTML.

Votes + Comments
Thanks
0

@ gentlemedia

Thank you for your reply.

Can you elaborate a bit more if possible?

The thing about this mark-up is that after testing it a bit it seems to perform as described, that is, is deals excellent with the mobile devices.

I need to learn though how it is all working.

This template seems very light compared to the majority of HTML+CSS I have worked with.

I would like to understand how to alter the height of the header area in this case. I am not seeing how to do that in this example.

Thanks,
Matthew

1

The thing about this mark-up is that after testing it a bit it seems to perform as described, that is, is deals excellent with the mobile devices.

Not sure about that :) There is a horizontal scrollbar on smaller screens.
This type of fluid layouts was used before there were media queries, so if you want to optimize your site also for smaller screens then look into responsive web design.

As for your question... the height of the header gets dictated by the content inside the header (in this case the image). This is the way to go, because setting specific heights and even widths (magic numbers) is not really flexible especially within fluid layouts/responsive web design or if content gets added dynamically via a CMS.
A good read for this is: https://css-tricks.com/magic-numbers-in-css/

Edited by gentlemedia

0

@ gentlemedia,

When I look at the site on my smart-phone I do not have a horizontal bar. Rendering on a small device such as this is one of my main concerns in development

Yes, I thought that the banner image may be dictating the size of the header area which I felt instinctually was not the correct way to go

I am going to research responsive design and learn more about it today

Thank you for your assistance and suggestions. Much appreciated

I may post back here later with more questions

-Matthew

Edited by mattyd

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.