HTML/CSS layout

Question

I have (probably) very basic HTML/CSS question:

I'm using asp.net MVC 4 I supposed to develop simple website, which looks as the following:

Page example 1:
Page example 2:

On every page, there should be a header icon (this is a website logo) and links in the bottom. The only thing that changes between pages is a content area. Content width is different from page to page.The whole layout should be centered (as shown on design examples).

Since there are common header and footer for all pages on the website, I decided to create Layout file, like this:

...
    <body id="index" class="home">

        <header id="header" class="body">
            here comes a logo
        </header>

        <section id="content" class="body">
            @RenderBody()
        </section>

        <footer id="footer" class="body">
            <nav>
                <ul id="menu">
                   here the links
                </ul>
            </nav>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

Problem: I don't know how to achieve desired look. Did I made right decision about putting header and footer into common layout file?

I don't know HTML, but I do know well XAML. In XAML, I would do the following:

<Grid>
 <Grid.ColumnDefinitions>
   <Column Width="*"/>
   <Column Width="auto"/>
   <Column Width="*"/>
 </Grid.ColumnDefinitions>
</Grid>

Putting content into Column 1 would give me the desired behavior (middle column will take width of it child, while left and right columns will take all the left space on the screen divided equally, thus centering content on the middle).

Thanks

Mathias Rechtzigel · Accepted Answer · 2013-11-14 15:37:08Z

2

Wrap your elements within a div that has a set width and the following styles: margin:0 auto;

HTML:

<div id="widthContainer">
    <div id="header">
        <div id="logo">Logo</div>
    </div>
    <div id="mainContent">mainContent</div>
    <div id="footer">footer</div>
</div>

CSS

#widthContainer{width:800px;height:1000px;background-color:red;margin:0 auto;}
#header{width:100%;height:200px;background-color:blue;margin-bottom: 50px;}
#logo{width:200px;height:200px;background-color:green;}
#mainContent{position:relative;width:100%;height:500px;background-color:pink;margin-bottom: 50px;}
#footer{position:relative;width:100%;height:300px;background-color:green;margin-bottom: 50px;}

Here's an example fiddle.

answered Nov 14, 2013 at 15:37

Mathias Rechtzigel

3,6141 gold badge22 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Illidan Over a year ago

I tried to do what you suggesting, but it not gives me desired effect. I wanted that the width of widthContainer will be according to width of the content inside mainContent. In your sample (unless I missing something), the width is always 800px. BTW - thank you for showing jsfiddle - looks very useful.

Mathias Rechtzigel Over a year ago

What is the width of mainContent? Just make that the width of widthContainer and make mainContent width 100% (Which is the width you would want.) You can edit the JSFiddle to whatever your needs are, it's just an example and not the end product that you'll use.

Illidan Over a year ago

I edited my question to make it more clear. Thank you

Mathias Rechtzigel Over a year ago

My example still works in this situation. Just change the width and the container contents from page to page. Easy peasy.

Ed Charbeneau · Accepted Answer · 2013-11-14 15:52:47Z

1

If you're not familiar with HTML and CSS then I would suggest starting with a framework like Foundation. Foundation will give you a CSS grid which will make page layouts very easy to understand.

There is a NuGet package with simple installation instructions. You can find out more here: http://responsivemvc.net/foundation

You can get templates for many different layouts here: http://foundation.zurb.com/templates.php

answered Nov 14, 2013 at 15:52

Ed Charbeneau

4,67426 silver badges24 bronze badges

Comments

Ravi Hamsa · Accepted Answer · 2013-11-14 15:33:07Z

0

create a wrapper around all containers with style

  width:960px; /* or whatever you want */
  margin:0 auto;

every div inside this wrapper would be centre aligned.

answered Nov 14, 2013 at 15:33

Ravi Hamsa

4,7313 gold badges16 silver badges14 bronze badges

2 Comments

Illidan Over a year ago

I edited my question to make it more clear. Thank you

Ravi Hamsa Over a year ago

This is exactly what I understood from your earlier question. May answer was too brief.

BobbyDazzler · Accepted Answer · 2013-11-14 15:35:56Z

0

As far as I know, your CSS would be something basic along the lines of this. You would need to change them from classes to whatever CSS type you are wanting to use (I like classes, if that is what they are called :| ). If you were going to use CSS "classes", you would change the "class" on your elements also to match each name.

Also, the float property on the header you may be able to do without, it might distort the page. That I'm unsure of.

.body {
    display:block;
    width: 1080px; /* your choice*/
    margin: 0 auto;
    padding: 0;
}
.header {
    display:block;
    float:left;
}
.content {
    display:block;
}
.footer {
    display:block;
}

answered Nov 14, 2013 at 15:35

BobbyDazzler

1,2039 silver badges24 bronze badges

1 Comment

Ravi Hamsa Over a year ago

why display block for content and footer? aren't they already block. also you missed clearing float.

Collectives™ on Stack Overflow

HTML/CSS layout

4 Answers 4

4 Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related