14 Replies - 895 Views - Last Post: 10 April 2013 - 01:22 PM

#1 ddublya  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 16-October 12

CSS columns needed so they fit under my header image

Posted 10 April 2013 - 07:41 AM

Hi, Im a student and new to CSS. I have created a site that I want to look like a boxed in section in the middle of the browser.
It will have a header stretched across 1034px. Below that I want 3 columns fixed and the footer the same as the header.
I have the following code as I copied from a site online A List Apart.
It works nicely but I was hoping to modify it to fix the widths.
Each time I divide up the widths and change them to fixed sizes it goes all over the place and I cant get it to sit below my header evenly.
Can anyone point me in the right direction?

Heres the code:

body {
  min-width: 630px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}
#container {
  padding-left: 200px;   /* LC fullwidth */
  padding-right: 190px;  /* RC fullwidth + CC padding */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
#right {
  width: 130px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -190px;  /* RC fullwidth + CC padding */
}
#footer {
  clear: both;
}/*** IE Fix ***/
* html #left {
  left: 150px;           /* RC fullwidth */
}



Sorry that was the code from the site, heres my code as I cant seem to edit the original post:
body {
    min-width: 630px;
    background-color: #fff;
    
    
}
#header{
    clear: both;
    height: 250px;
    background-color: #e2e2e2;
    background-image: url("../images/topbar4.png");
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}
#head2{
    text-align: right;
}
#container{
    
    overflow: hidden;
    padding-left: 200px;
    padding-right: 190px;
    background-image: -ms-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: -o-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #ffffff));
    background-image: -webkit-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-repeat: no-repeat;
}
#container .column{
    position: relative;
    float: left;
    padding-bottom: 20010px;
    margin-bottom: -20000px;
}
#center{
    
    padding: 10px 20px;
    width: 100%;
    
}
#left{
    border-style: solid;
    border-width: 1px;
    width: 180px;
    padding: 0 10px;
    margin-left: -100%;
    right: 240px;
    
}
#right{
    
    width: 130px;
    padding: 0 10px;
    margin-right: -190px;
    
}
#footer{
    clear: both;
    position: relative;
}
*html #left{
    left: 150px;
}
*html body{
    overflow: hidden;
}
*html #footer-wrapper{
    float: left;
    position: relative;
    width: 100%;
    padding-bottom: 10010px;
    margin-bottom: -10000px;
    background: #000;
}
ul#menu {
    position: relative;
    top: 100px;
    left: 200px;
    font-size: 1.3em;
    font-weight: 600;
    color: #fff;
    margin: 0 0 20px; 
}

ul#menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
}

ul#menu li a {
    background: none;
    color: #fff;
    text-decoration: none;
}

ul#menu li a:hover {
    color: #333;
    text-decoration: none;
}



body {
    min-width: 630px;
    background-color: #fff;
    
    
}
#header{
    clear: both;
    height: 250px;
    background-color: #e2e2e2;
    background-image: url("../images/topbar4.png");
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}
#head2{
    text-align: right;
}
#container{
    
    overflow: hidden;
    padding-left: 200px;
    padding-right: 190px;
    background-image: -ms-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: -o-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #ffffff));
    background-image: -webkit-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-repeat: no-repeat;
}
#container .column{
    position: relative;
    float: left;
    padding-bottom: 20010px;
    margin-bottom: -20000px;
}
#center{
    
    padding: 10px 20px;
    width: 100%;
    
}
#left{
    border-style: solid;
    border-width: 1px;
    width: 180px;
    padding: 0 10px;
    margin-left: -100%;
    right: 240px;
    
}
#right{
    
    width: 130px;
    padding: 0 10px;
    margin-right: -190px;
    
}
#footer{
    clear: both;
    position: relative;
}
*html #left{
    left: 150px;
}
*html body{
    overflow: hidden;
}
*html #footer-wrapper{
    float: left;
    position: relative;
    width: 100%;
    padding-bottom: 10010px;
    margin-bottom: -10000px;
    background: #000;
}
ul#menu {
    position: relative;
    top: 100px;
    left: 200px;
    font-size: 1.3em;
    font-weight: 600;
    color: #fff;
    margin: 0 0 20px; 
}

ul#menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
}

ul#menu li a {
    background: none;
    color: #fff;
    text-decoration: none;
}

ul#menu li a:hover {
    color: #333;
    text-decoration: none;
}


This post has been edited by BenignDesign: 10 April 2013 - 07:44 AM
Reason for edit:: added [code][/code] tags


Is This A Good Question/Topic? 0
  • +

Replies To: CSS columns needed so they fit under my header image

#2 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5755
  • View blog
  • Posts: 10,078
  • Joined: 28-September 07

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 07:43 AM

I think the better question is what the hell is this about?

Quote

padding-bottom: 20010px;
    margin-bottom: -20000px;


Was This Post Helpful? 0
  • +
  • -

#3 ddublya  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 16-October 12

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 07:46 AM

I took these guys word for it:
http://www.positioni...out/equalheight
Was This Post Helpful? 0
  • +
  • -

#4 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5755
  • View blog
  • Posts: 10,078
  • Joined: 28-September 07

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 07:51 AM

Are you trying to make them the same width or the same height (your post says width, your 20,000px padding article says height).

My first piece of advice would be to step back, strip your code down to only the barest of style rules and focus on accomplishing one task at a time. This makes it much easier to determine where your problems are coming from. If you fix your width problem, then go on to work on your height problem - and find your widths suddenly askew - you have a much better idea where to look to find the code that has fubar'd your layout.
Was This Post Helpful? 2
  • +
  • -

#5 ddublya  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 16-October 12

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 07:58 AM

Thanks for the reply.
Im going to copy the css into a new file and strip it back.
The widths are to be different, left column is 200px, right is 190px and the center takes up the remaining from the 1034 which is 644px.
I have a search filter going into the left bar and the database results will be displayed in the center so it may need adjusting in the future.
The header image is 134px wide and I'd like the rest of the site to sit neatly below it inline with its width.

I have a version that kinda works but the entire site is shifted left, I need it to be postioned in the center when a user opens it.
Was This Post Helpful? 0
  • +
  • -

#6 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5755
  • View blog
  • Posts: 10,078
  • Joined: 28-September 07

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 08:14 AM

To center your layout, try this:

body {
   margin:0 auto;
   text-align:center;
}

#wrapper {
   text-align:left;
   width:1034px;
}



Note: When I code, I always, always, always have a div called "wrapper" that goes immediately inside the body tag and literally "wraps" everything on the page. It contains nothing more than the code shown here (and - MAYBE - a background something or other if the layout calls for it). No fonts, no margins, no weird adjustments to it. It's just a wrapper to hold everything else in place. Coupled with the code in the "body" section, this will center your "wrapper" div in the middle of the page regardless of the viewer's screen size. Hence, everything in the "wrapper" will also be centered on the screen.
Was This Post Helpful? 1
  • +
  • -

#7 ddublya  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 16-October 12

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 08:37 AM

Thanks, that centered the graphic so now the page opens good.
Now my columns have gone in their own direction again as shown in pic clip attached.
How do I get them to line up - Im guessing if I got the left one to work the rest will follow.

The image

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#8 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5755
  • View blog
  • Posts: 10,078
  • Joined: 28-September 07

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 08:42 AM

Did you put <div="wrapper"> around EVERYTHING inside the <body>? If your image is 1034px and your #wrapper is 1034px, that left column should fall right into place.
Was This Post Helpful? 0
  • +
  • -

#9 ddublya  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 16-October 12

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 09:47 AM

I have that added to the container div as so:
#container{
    
    overflow: hidden;
    background-image: -ms-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: -o-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #ffffff));
    background-image: -webkit-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-repeat: no-repeat;
    text-align: left;
    width: 1024px;



Heres the html which could be where its going wrong:
@{
    
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Big Event</title>
        <link href="stylesheet2.css" rel="stylesheet" type="text/css"/>
        
    </head>
    <body>
        
        <div id="header">
            <div id="head2">login / register</div>
            <ul id="menu">Please chooose an option:
            <li><a id = "a1">one</a></li>
            <li><a id = "a2">two</a></li>
            <li><a id = "a3">three</a></li>
            </ul>
        </div>
        <div id="container">
        <div id="left" class="column">
            left<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
        </div>
        <div id="center" class="column">
            center<p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p>
        </div>
        <div id="right" class="column">
            right<p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p>
        </div>
        </div>
        <div id="footer-wrapper">
        <div id="footer">This is the footer</div>
        </div>
    </body>
</html>


Was This Post Helpful? 0
  • +
  • -

#10 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5755
  • View blog
  • Posts: 10,078
  • Joined: 28-September 07

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 10:29 AM

Not quite what I was suggesting.

<body>
  <div id="wrapper">
     <div id="header">
        .
        .
        .
     </div> //End header div
     <div id="container">
        .
        .
        .
     </div> //End container div
   </div> //End wrapper div
</body>



Having the wrapper around EVERYTHING will should move it all to the same starting point.
Was This Post Helpful? 1
  • +
  • -

#11 ddublya  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 16-October 12

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 11:29 AM

Your help is much appreciated, sorry for being a complete noob at this but none of this stuff is covered in any of my books.
Ok have that done.
Now the entire site pulls to the left but it is inline with the header image, any ideas
Also I had a fade background going down through the container should I shift that to the body or wrapper now as there is now white space at the edges?

--- Dont know why I asked about the background fade - added the code to the body and was ok.
Was This Post Helpful? 0
  • +
  • -

#12 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5755
  • View blog
  • Posts: 10,078
  • Joined: 28-September 07

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 11:31 AM

Ok. Show me your code -- all of your HTML and all of your CSS. It's much easier to help if I have a clear picture of what you're working with.
Was This Post Helpful? 1
  • +
  • -

#13 ddublya  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 16-October 12

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 11:36 AM

CSS-
body {
    min-width: 1024px;
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    background-image: -ms-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: -o-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #ffffff));
    background-image: -webkit-linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-image: linear-gradient(top, #e2e2e2 0%, #fff 100%);
    background-repeat: no-repeat;
}
#wrapper{
    text-align: center;
    width: 1024px;
}
#header{
    clear: both;
    height: 250px;
    width: 100%;
    background-color: #e2e2e2;
    background-image: url("../images/topbar4.png");
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}
#head2{
    text-align: right;
}
#container{
    overflow: hidden;
}
#container .column{
    position: relative;
    float: left;
}
#left{
    border-style: solid;
    border-width: 1px;
    width: 180px;
}
#center{
    border-style: solid;
    border-width: 1px;
    width: 624px;
}
#right{
    border-style: solid;
    border-width: 1px;
    width: 190px;
    padding: 0 10px;
}
#footer{
    border-style: solid;
    border-width: 1px;
    clear: both;
    position: relative;
}
*html #left{
    left: 180px;
}
*html body{
    overflow: hidden;
}
*html #footer-wrapper{
    float: left;
    position: relative;
    width: 100%;
    background: #000;
}
ul#menu {
    position: relative;
    top: 100px;
    left: 200px;
    font-size: 1.3em;
    font-weight: 600;
    color: #fff;
    margin: 0 0 20px; 
}
ul#menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
}
ul#menu li a {
    background: none;
    color: #fff;
    text-decoration: none;
}
ul#menu li a:hover {
    color: #333;
    text-decoration: none;
}



HTML -
@{
    
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <link href="stylesheet2.css" rel="stylesheet" type="text/css"/>
        
    </head>
    <body>
        <div id="wrapper">
        <div id="header">
            <div id="head2">login / register</div>
            <ul id="menu">Please chooose an option:
            <li><a id = "a1">one</a></li>
            <li><a id = "a2">two</a></li>
            <li><a id = "a3">three</a></li>
            </ul>
        </div>
        <div id="container">
        <div id="left" class="column">
            left<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
        </div>
        <div id="center" class="column">
            center<p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p>
        </div>
        <div id="right" class="column">
            right<p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p><p>right</p>
        </div>
        </div>
        <div id="footer-wrapper">
        <div id="footer">This is the footer</div>
        </div>
       </div>
    </body>
</html>


Was This Post Helpful? 0
  • +
  • -

#14 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5755
  • View blog
  • Posts: 10,078
  • Joined: 28-September 07

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 12:17 PM

I added "margin:0 auto;" to the #wrapper CSS and it seems to have fixed the issue.
Was This Post Helpful? 1
  • +
  • -

#15 ddublya  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 16-October 12

Re: CSS columns needed so they fit under my header image

Posted 10 April 2013 - 01:22 PM

That worked thanks!
Now just to put all the stuff in and hand it in in a month.
The columns are still a little out but I wont be putting borders around them so I can pad the buttons and text in.
I'll be on here a lot for the foreseeable future.
Your help is much appreciated.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1