HTML & CSS Layout help

Question

I am trying to create a layout with the sidebar on the left and content on the right, this is my first time creating a site with this layout type:

Update:

I have updated the css as I have made a few changes but I have now been told that I can use overflow: auto; on the #leftCol and the #content so that the page will expand dependent on the data on the page.

I have tried this but it pushes my content div under the nav and it is like the whole #leftCol goes missing because I am only left with the <li> options

How Could I do this?

Doctype: HTML5

HTML:

<!DOCTYPE html>
    <head>
    </head>
    <body>
        <div id ="wrapper">
            <div id ="header">
            <h1 id = "companyName"></h1>
            <h4 id = "companyQuote">""</h4>
            </div>
    <div id="leftCol">
     <nav>
            <ul>
            <?php if($this->session->userdata('logged_in')): ?>
                <li><?php echo anchor('admin/dashboard', 'Dashboard');?></li>
                <li><a>Edit Pages<a>
                <?php if(is_array($cms_pages)): ?>
                        <ul>
                            <?php foreach($cms_pages as $page): ?>
                            <li><a href="<?=base_url();?>admin/editpage/index/<?= $page->id ?>/<?php echo url_title($page->name,'dash', TRUE); ?>"><?=$page->name?></a></li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                    </li>
                <li><a>Gallery</a>
                <ul>
                    <li><?php echo anchor('admin/addimage','Add Image');?></li>
                    <li><?php echo anchor('admin/deleteimage','Delete Image');?></li>
                </ul>
                </li>
                <li><a>Sales</a>
                <ul>
                    <li><?php echo anchor('admin/addsale','Add Sale');?></li>
                    <li><a>Edit Sale</a>
                                <?php if(is_array($sales_pages)): ?>
                                        <ul>
                                            <?php foreach($sales_pages as $sale): ?>
                                            <li><a href="<?=base_url();?>admin/editsale/index/<?= $sale->id ?>/<?php echo url_title($sale->name,'dash', TRUE); ?>"><?=$sale->name?></a></li>
                                            <?php endforeach; ?>
                                        </ul>
                                    <?php endif; ?>
                                    </li>
                    </li>
                    <li><?php echo anchor('#','Delete Sale');?></li>
                </ul>
                    <li><?php echo anchor('admin/home/logout','Log Out');?></li>
                </li>
            <?php else: ?>
            <?php redirect('admin/home'); ?>
                <?php endif; ?>
        </nav>
    </div><!-- Left Col End -->
         <div id="content">
         <h1><?= $title ?></h1>
        <p> <?= $content // loads template file ?> </p>
       </div><!-- Content End -->     

        <div id="footer">&copy; <?php echo date('Y');?></div>
        </div> <!-- Wrapper Close -->
    </body>

CSS:

/*Reset */
html, body, h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }

/* Main CSS */
html,body{
    height:100%;
}
#wrapper{
    width:960px;
    min-height:100%;
    margin: 0 auto;
}
#header{
    background-image:url('../images/header.png');
    background-color:#000;
    height:220px;
}



/*Menu */
nav{
    float:left;
    width:190px;
    height:25%;
    margin:0 0 0 0;
}

nav ul{
    float:left;
    width:190px;
}

nav li a{
    margin-left:10px;
    font-size:14px;
    color:#fff;
    text-decoration:none;
}

nav ul li{
    display:block;
    list-style:none;
    width:190px;
    height:25px;
    position:relative;
    background-image:url('../images/normal.png');
} 

nav ul li ul{
    display:none;
}

nav ul li ul li li{ /* edit page drop down */
    display:none;
}


nav ul li:hover ul{ /*Main Drop Down */
    display:block;
    position:absolute;
    left:190px;
    top:0px;
}

nav ul li ul li:hover li{ /* edit page drop down */
    display:block;
    position:absolute;
    left:0px;
    top:0px;
}

nav li:hover{
    width:100%;
    background-image:url('../images/onclick.png');
}

/*Content */
 #leftCol{
    float:left;
    width:190px;
    background-image:url('../images/metalnavbg.png');
    border: red 1px solid;
}

#content{
    float:left;
    width:990px;
    overflow:auto;
}

#content h1{
    margin: 10px 0 0 0;
    text-indent:25px;
    font-family: 'Josefin Slab', arial, serif;
    font-size:24px;
}

#content p{
    margin:10px 0 0 0;
    text-indent:26px;
}

#footer{
    clear:both;
    background:url('../images/footer.png') no-repeat #000;
    width:100%;
    height:60px;
}

/* Misc*/

#metal{
    float:left;
    margin:160px 0 0 -190px;
    background-image:url('../images/metalnavbg.png');
    height:auto;
    width:190px;
}

/* Text Formatting */

#companyName{
    text-align:center;
    padding-top:45px;
    font-size:35px;
    color:#f0f0ef;
}

#companyQuote{
    text-align:center;
    font-size:18px;
    color:#a5a4a2;
}

/*Forms */
/*General*/

#validation{
    font-weight:bold;
    color:#ff0101;
}

.form{
    width: 400px;
    height:100%;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

.form fieldset{
    border:none;
}

#formLayout{
    border:2px solid #000;
}

#formLayout label{
   clear:  both;
    display: block;
}

#formLayout input{
    font-size:12px;
    border: 2px solid #999;
    padding: 6px 8px;
    background-color: #fff;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    color: #000;
    width: 250px;
}



#formLayout .small{
    color:#ff0101;
    display:block;
    font-size:11px;
    font-weight:bold;
    text-align:left;
    width:140px;
}

#formLayout textarea{
    width:250px;
}

#error{

    width:250px;
    height:20px;
    margin:-30px 0 0 270px;
    padding-bottom:10px;
}

#error p{
    color:#ff0101;
    text-align:left;
}
/* Page Edit Form */

#pageEdit .form, #formLayout{
    width: 490px;
    height:100%;
    padding: 15px 55px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

#pageEdit textarea{
    width:480px;
}

#deleteImage{
    float:left;
    margin-left:25px;
    width:100px;
    height:100px;
}

#deleteImage .thumbnail{
    margin:0 auto;
    height:90px;
    width:90px;
}

what is your doctype (X)HTML(4|5)(Strict|Transitional|Frameset)? — Caspar Kleijne
– Caspar Kleijne, Commented Apr 25, 2011 at 7:07
Ummm....pretty sure there isn't a "transitional" HTML 5 doctype. HTML 5 is just HTML 5. — Shauna
– Shauna, Commented Apr 25, 2011 at 17:55
Your markup is invalid, for instance there is no closing ul at the end of the nav, try fixing that first. — robertc
– robertc, Commented Apr 27, 2011 at 22:45

Alohci · Accepted Answer · 2011-04-25 13:18:55Z

5

Doctype: HTML5 -> Transitional

There's no such thing.

Issues:

I am having trouble to create a layout that expands dependent on the amount of data given.

OK

How would I produce the graphic -> Metal so that it expands.

Expands in what way, and under what conditions?

Why am I getting overlap with I hover over my nav dropdown menu -> The nav does not seem to get wider for the number of options within it.

You've set a fixed width for the nav element. Why would expect it to expand?

Would I make my #rightCol graphic a fixed width?

Depends what you're trying to achieve. My guess is you probably don't need to.

Do I even need #rightCol?

Possibly not.

Should I make the width 960 or 990px?

Name some goals for your layout.

answered Apr 25, 2011 at 13:18

Alohci

84.2k16 gold badges120 silver badges164 bronze badges

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

Collectives™ on Stack Overflow

HTML & CSS Layout help

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related