CSS Div layout

Hi

I'm trying to get a css layout working. One so I can use it, and two just to refine my css skills.

The idea is that each part of the page (left pane, right pane, middle pane etc) have a border around them that is a series of background images. This is because I want to have rounded corners and my own border that I've designed.

I think the biggest problem I'm having is getting these borders (.leftbar, .rightbar) to use the full height of the div they are in. If I could get this I'd be golden.

Any help?

Thanks!

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
 
  <title></title>
 
  <style>

  body

  {

    text-align: center;
 
  }
 
  #wrapper

  {

    margin:  0 auto;

    text-align: left;

    width: 80%;

    overflow: hidden;
 
  }
 
  #header

  {

    width: 100%;

    background-color: blue;
 
  }
 
  #leftpane

  {

    float: left;

    width: 19%;

  background-color: green;

  }
 
  #content

  {
 
    width:50%;

    float: left;

    margin: 0px 1%;

    background-color: red;
 
  }
 
  #rightpane

  {

    width: 29%;

    float: right;

background-color: yellow;
 
  }
 
  #footer

  {

    width: 100%;

    clear: both;

background-color: orange;

  }

  .topbar

  {

  }
 
  .panecontent

  {

    display: inline;

    float:left;

    width: 90%;
 
  }
 
  .leftbar

  {

    height: 100%;

    width:5px;

    display:inline;

    background-color: black;

    float:left;

  }
 
  .rightbar

  {

    height: 100%;

    width: 5px;

    display:inline;

    background-color: black;

    float: right;

    margin: 0px;

  }
 
  .bottombar

  {
 
  }
 
  </style>
 
  </head>

  <body>

      <div id="wrapper">

      <br>

          <div id="header">

          <br>

          </div>
 
          <div id="mainbody">

          <br>

            <div id="leftpane">

              <div class="topbar"></div>

              <div class="leftbar"></div>

              <div class="panecontent">

              menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu

              </div>

              <div class="bottombar"></div>

              <div class="rightbar"></div>

            <br>

            </div>
 
            <div id="content">

              <div class="topbar"></div>

              <div class="leftbar"></div>

              <div class="panecontent">

              body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body   body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body

              </div>

              <div class="bottombar"></div>

              <div class="rightbar"></div>

            </div>
 
            <div id="rightpane">

              <div class="topbar"></div>

              <div class="leftbar"></div>

              <div class="panecontent">

              rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside  

              </div>

              <div class="bottombar"></div>

              <div class="rightbar"></div>

            </div>
 
        <br>  

          </div>      

    <br>

          <div id="footer">

              <div class="topbar"></div>

              <div class="leftbar"></div>

              <div class="panecontent">

              footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer  

              </div>

              <div class="bottombar"></div>

              <div class="rightbar"></div>

          </div>
 
      </div>

  </body>

</html>

Jun 8 '09 #1

Subscribe Post Reply

2688

drhowarddrfine

7,435

Expert 4TB

They are using full height.

No one has any need to use the transitional doctype. Always use strict. See the article about doctypes under topics->html->insights above.

Jun 8 '09 #2

drhowarddrfine

7,435

Expert 4TB

Oh, I see you were looking in IE. Never, ever use IE to test anything until it's working in the more modern browsers first. 11 years behind modern standards and practices, it's never to be trusted to do anything right.

Interesting it happens in IE7 and 8. I'll have a look.

Fix this: <style type="text/css">

Jun 8 '09 #3

drhowarddrfine

7,435

Expert 4TB

I've got the flu really bad and it's hard to think clearly but I'm bored just laying in bed all weekend.

Your doctype is also incorrect and throwing IE into quirks mode. When you see the article, you'll be given the correct doctype. Once done, IE and FF will perform the same though not what you want.

Jun 8 '09 #4

prabirchoudhury

162

100+

hey

1. you could draw border around the <div> using like

Expand|Select|Wrap|Line Numbers

 
       #header 

  { 

    width: 100%; 

    background-color: blue;

    border: 4px solid #999593;
 
  } 

or #header 

  { 

   border-width:thik; 

  border-color:#854841; 

  border-style:double; 
 
  }

need more help

CSS and Borders

Jun 8 '09 #5

DevInCode

I could use a border, but although its not shown in my example, the plan was to use background images so I can use the border I've designed.

Jun 8 '09 #6

bryanfuller

It is little a bit difficult div base layout.
If you can handle the mozela problem then you can start getting free lancing.

Jun 9 '09 #7

bryanfuller

This stickers printing site is one of good example of such layout with fly menus.

Jun 9 '09 #8

DevInCode

I don't really see what that has to do with using graphic custom css borders.

Jun 9 '09 #9

drhowarddrfine

7,435

Expert 4TB

I'm starting to perk up a bit today. Both your problems are solved with css3; rounded corners today, custom borders tomorrow, but none will work in IE, of course, only modern browsers.

If I'm feeling better later today I'll look deeper into this but I have to go to Chicago tomorrow so....

Jun 9 '09 #10

by: Peter Diedrich | last post by:

The site design is pretty simple: ============================================ | Head | ============================================ | | ...

HTML / CSS

table-less layout & forms

by: Zak McGregor | last post by:

Hi all Are there any good solutions to aligning form field names and input boxes without resorting to tables? I am struggling to do this nicely at the moment. Thanks Ciao Zak

HTML / CSS

Table Layout and What's Wrong With it

by: Neal | last post by:

Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.

HTML / CSS

Alternative to Frames

by: Tammy | last post by:

What would be a good alternative to using frames? I need something that will section my webpage into two halves and can change both frames on a single click. Thanks in Advance, Tammy

HTML / CSS

PyQt layout question: QScrollView and QGridLayout?

by: Volker Lenhardt | last post by:

For a QApplication (PyQt) on the small screen of my Zaurus 5500 PDA I try to layout my data output in a QScrollView as the central widget. I'd prefer to use QGridLayout, but cannot add it to the...

Python

How to make layout without tables (using div's)...

by: Luke | last post by:

Hi. I am trying to make correct layout, here is an example of (dynamically generated content via jsp): http://localhost/www/layout.htm Most outer div is positioned absolute (if not then it...

HTML / CSS

Layout basics

by: Samuel Shulman | last post by:

I am looking for good guidance for positioning controls on the form.document, it is absolute nightmare and I don't know where to begin Thank you, Samuel Shulman

ASP.NET

Frames vs Table layout

by: Jeff User | last post by:

Hi all I am writing program/framework to server a web site dynamically based on stored web page data with C#, .net1.1 What is the preferred means of controlling page layout, frames or...

C# / C Sharp

Layout Question.

by: Ed Sproull [MSFT] | last post by:

First I'm pretty new to ASP.NET and I'm having a simple problem. I have small website with a header, sidebar and the the content. I want my content to appear beside my sidebar which seems to be a...

ASP.NET

No TABLES in html. No hacks in CSS. Any layout possible, crossbrowser. Try it.

by: brave1979 | last post by:

Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in...

HTML / CSS

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Similar topics