Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2005
    Location
    Canada
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Align A Sidebar Next To A Header ...?

    Hey everyone!

    I've got a question for you all --- Forgive me if the answer seems a little obvious. I know the answer's within my own grasp, but I've got a headache and I simply can't figure it out today!

    Let's say I wanted to take my current WordPress theme, which is laid out like this:


    And I wanted to instead make it laid out like this, with the sidebar sorta beside the header:


    How would I go about creating this alignment by modifying my current CSS file? I've pasted it below for reference!

    Code:
    /*
    Theme Name: Version Thirty Eight
    Description: mallorymaloney.com's very first WordPress based layout
    Version: 1
    Author: Mallory Maloney
    Author URL: http://www.mallorymaloney.com/
    */
    
    body, h1, h2, h3, h4, h5, h6, blockquote, p{
    margin: 0;
    padding: 0;
    }
    
    body{
    text-align: center;
    font-family: Verdana, Tahoma, Arial;
    font-size: 11px;
    vertical-align: top;
    color: #000000;
    background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background1.gif') fixed;
    }
    
    h1{
    text-align: center;
    padding: 10px 0 4px 0;
    }
    
    h2{
    text-align: center;
    font-size: 9px;
    font-weight: normal;
    margin: 10px 0 10px 0;
    padding: 5px 0 5px 0;
    border: 3px solid #000000;
    background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background2.gif');
    }
    
    h3{
    text-align: center;
    font-size: 11px;
    font-weight: normal;
    padding: 0 0 10px 0;
    }
    
    h4{
    text-align: center;
    padding: 0 0 10px 0;
    }
    
    hr{
    text-align: center;
    color: #000000;
    height: 3px;
    width: 300px;
    }
    
    a:link, a:visited{
    text-decoration: none;
    font-family: Verdana, Tahoma, Arial;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    }
    
    a:hover{
    text-decoration: none;
    font-family: Verdana, Tahoma, Arial;
    font-size: 11px;
    font-weight: bold;
    color: #737373;
    }
    
    p{
    padding: 0 0 10px 0;
    }
    
    code{
    text-decoration: none;
    font-family: 'Courier New', Courier, 'Times New Roman', Times;
    font-size: 11px;
    color: #737373;
    }
    
    img{
    border: 0;
    }
    
    #wrapper{
    margin: 0 auto 0 auto;
    text-align: left;
    width: 632px;
    }
    
    #header{
    text-align: left;
    float: left;
    width: 630px;
    }
    
    #container{
    margin: 0;
    padding: 10px 0 0 0;
    float: left;
    width: 425px;
    border: 3px solid #000000;
    background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background2.gif');
    }
    
    .search{
    margin: 0;
    padding: 0 0 10px 0;
    text-align: center;
    }
    
    .fourohfour{
    padding: 0 10px 10px 10px;
    text-align: left;
    }
    
    .updatesblog{
    padding: 0 10px 0 10px;
    text-align: center;
    }
    
    .navigation{
    margin: 0;
    padding: 0 10px 10px 10px;
    }
    
    .alignleftsmall{
    margin: 0 0 10px 0;
    padding: 0;
    text-align: left;
    float: left;
    }
    
    .alignleftbig{
    margin: 0;
    padding: 0 0 50px 0;
    text-align: left;
    }
    
    .aligncentresmall{
    margin: 0;
    padding: 0 0 10px 0;
    text-align: center;
    }
    
    .aligncentrebig{
    margin: 0;
    padding: 0 0 50px 0;
    text-align: center;
    }
    
    .alignright{
    margin: 0 0 10px 0;
    padding: 0;
    text-align: right;
    float: right;
    }
    
    .page{
    padding: 0 10px 0 10px;
    margin: 0;
    }
    
    .post{
    padding: 10px 10px 0 10px;
    }
    
    p.postmetadata{
    margin: 0;
    padding: 0 0 10px 0;
    text-align: center;
    }
    
    .sidebar{
    margin: 0 0 0 10px;
    padding: 10px 0 0 0;
    float: left;
    width: 183px;
    display: inline;
    border: 3px solid #000000;
    background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background2.gif');
    }
    
    .sidebar ul{
    margin: 0;
    padding: 0 5px 0 5px;
    list-style-type: none;
    }
    
    .sidebar ul li{
    padding: 0 0 5px 0;
    }
    
    .sidebar ul ul li{
    margin: 0;
    padding: 0 0 10px 0;
    }
    
    ul{
    margin: 0;
    padding: 0 0 10px 0;
    list-style-type: none;
    }
    
    .comments-template{
    margin: 0;
    padding: 10px 0 0 0;
    }
    
    .comments-template ol{
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
    .comments-template li{
    margin: 0 0 3px 0;
    padding: 1px 0 1px 0;
    }
    
    .commentmetadata{
    border: 1px solid #dedede;
    background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background3.gif');
    text-align: center;
    font-size: 11px;
    color: #000000;
    }
    
    .comments-template p.nocomments{
    padding: 0;
    }
    
    blockquote{
    margin: 10px 30px 20px 30px;
    padding: 10px 10px 0 30px;
    font-family: Verdana, Tahoma, Arial;
    font-size: 11px;
    color: #000000;
    border: 1px solid #dcdcdc;
    background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background4.gif');
    }
    
    input{
    padding: 1px;
    font-family: Verdana, Tahoma, Arial;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    border: 1px solid #dedede;
    background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background3.gif');
    }
    
    textarea{
    padding: 1px 1px 1px 30px;
    font-family: Verdana, Tahoma, Arial;
    font-size: 11px;
    color: #000000;
    border: 1px solid #dcdcdc;
    background: #ffffff url('http://www.mallorymaloney.com/wp-content/themes/versionthirtyeight/background4.gif');
    }
    
    form{
    margin: 1px;
    padding: 1px;
    }
    
    #footer{
    margin: 0;
    padding: 0;
    clear: both;
    float: left;
    width: 630px;
    }
    Direct URL: http://www.mallorymaloney.com/wp-con...ight/style.css

    And here's my site's URL, just in case it's needed: http://www.mallorymaloney.com/

    Thank you so much in advance to anyone who has any tips! :)

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by mallorymaloney View Post
    And I wanted to instead make it laid out like this, with the sidebar sorta beside the header:
    Here's one idea:

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.01//EN">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demo</title>
    <style type="text/css" media="all">
    	* { margin: 0; }
    	html { background: white; color: black; font: 18px sans-serif; }
    	body > div { background: lime; }
    	h1 { float: right; width: 80%; background: pink; }
    	div div { background: tan; }
    	div div { float: left; width: 20%; }
    	body > div > p { margin: 0 0 0 20%; background: gold; }
    </style>
    <div>
    	<h1>Header</h1>
    	<div>
    		<h2>Sidebar</h2>
    		<p>Content</p>
    		<p>Content</p>
    		<p>Content</p>
    	</div>
    	<p>Content</p>
    	<p>Content</p>
    	<p>Content</p>
    	<p>Content</p>
    	<p>Content</p>
    	<p>Content</p>
    </div>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    mallorymaloney (11-27-2009)

  • #3
    New Coder
    Join Date
    Jun 2005
    Location
    Canada
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you so much for the tip/code! I really appreciate it. ^^


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •