CODEWITHSUNDEEP
css
user138988
user138988

Reputation: 41

CSS Column Troubles

I want a div on the left-hand side of the page as a column, and another div to fill the right side of the page. The screenshot that I have attached shows that both in Firefox and IE7 (with scroll bars off), the two divs go beyond the boundaries of the screen. I have tried to get a margin of 2px on all sides so that the border of the div can be seen, but this did not work.

http://img529.imageshack.us/img529/7505/29882421.jpg

CSS

* {
  margin: 0;
}
html, form, body {
  height: 100%;
  margin:0;
  padding:0;
  font-family: "Segoe UI", "Lucida Grande", Helvetica, verdana, sans-serif;
  font-size: 11px;
  background: url(/Manage.UI/App_Themes/Default/header.png) no-repeat;
  overflow: hidden;
}
#header {
  height:162px;
  background: url(/Manage.UI/App_Themes/Default/header.png) no-repeat;
}
#left {
  top: 65px;
  border-width: 1px;
  border-style: solid;
  border-color: #c6c6c6;
  min-height:100%;
  height: auto !important;
  height: 100%;
  width:300px;
  bottom:100px;
  left: 2px;
  position: absolute;
  float:left;
  background-color: White;
}
.wrapper {
  min-height: 100%;
  width: 100%;
  height: auto !important;
  height: 100%;
  top: 0px;
  position: relative;
  margin: 2px 2px 2px 2px;
}
#right {
  top: 65px;
  border-width: 1px;
  border-style: solid;
  border-color: #c6c6c6;
  height:100%;
  width:100%;
  left: 305px;
  position: absolute;
  float:right;
  background-color: White;
}

And the ASPX Page

<body>
  <form id="form1" runat="server">
    <div class="wrapper">
      <div id="left"></div>
      <div id="right"></div>
      </div>
    </div>
  </form>
</body>

Upvotes: 1

Views: 205

Answers (2)

Dan Herbert
Dan Herbert

Reputation: 103407

Use Faux columns. Below is a working example I threw together (without the background image).

Also, I've made a few changes to your CSS.

  1. For your CSS, I made a poor man's reset.css, consisting of 1 rule. You shouldn't use * to select all elements and reset things, instead, use a real reset css stylesheet.
  2. I used faux columns, without the background image (I left a comment where it would go)
  3. I used a "modern" approach to clear the floats for my columns from quirksmode.org. It works in all browsers and keeps your markup cleaner.
  4. I renamed your column IDs. This is to keep your markup more semantic. Your IDs and classes should have semantic names that define content, not style. Your CSS defines the style, not your HTML. It is a good practice to keep things that way.

The CSS:

html, body, form, div {
    margin: 0;
    padding: 0;
    border: 0;
}
#header {
    height:80px;
    border: 1px solid #000;
}
#footer  {
    height: 80px;
    border: 1px solid #000;
}
.wrapper {
    width: 100%;
    overflow: auto;
    border: 1px solid #000;
    /* Place faux column background image rule here */
}

#nav {
    float: left;
    width: 25%;
}

#content {
    float: left;
    width: 75%;
}

And the HTML:

<head>
    <title></title>
    <link href="Core.css" rel="Stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="header">Header</div>
        <div class="wrapper">
            <div id="nav">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div id="conent">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div id="footer">Some footer content</div>
    </form>
</body>
</html>

Upvotes: 3

Gabriel Hurley
Gabriel Hurley

Reputation: 40052

EDIT: Dan beat me to it.

Use faux columns for the same effect. Essentially you create a background images that repeats downward that's the width of the column(s), making it look like it extends all the way down when it doesn't.

Trying to make equal-height columns in css without resorting to fixed-height or other hacks is going to give you nothing but pain.

Upvotes: 1

Related Questions