• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 589
  • Last Modified:

CSS left middle right block in a row

hi,

what i /really/ want is:

------------------------------------------------------------------------------------------
|            |             unlimited size (and a long bg image)                   |            |
| left       ---------------------------------------------------------------------  right    |
|            |                                 navbar (text inline)                        |            |
-------------------------------------------------------------------------------------------

just copy this into notepad to get the idea


but i thought id start off small first, so i try to get a:


<table><tr><td>left</td><td>bla</td><td>right</td></table> using divs

not text only, it will contain images etc so i want div blocks, inline wont do


anyway, i wanted to start off with this: but it aint working, any ideas why?


<style type="text/css" media="screen">

            body
            {
                  margin: 0;
                  padding: 0;
                  font-size: 95%;
                  font-family: georgia, times, "times new roman", serif;
                  color: #000;
                  background-color: #fff;
            }

            a:link { color: #036; }
            a:visited { color: #066; }

            a:hover, a:active
            {
                  color: #fff;
                  background-color: #036;
            }

            div#banner
            {
                  color: #fff;
                  background-color: #333;
                  border-bottom: 1px solid #000;
            }

            div#banleft
            {
                  width: 150px;
                  padding-top: 2em;
            }

            div#banmiddle
            {
                  margin-left: 150px;
                  margin-right: 150px;
            }

            div#banright
            {
                  width: 150px;
                  float: right;
                  color: #f00;
            }

</style>
</head>
<body>
<div id="banner">
      <div id="banleft">
            hello
      </div>
      <div id="banmiddle">
            hello1
      </div>
      <div id="banright">
            yo jo
      </div>
</div>
</body>
0
maUru
Asked:
maUru
1 Solution
 
maUruAuthor Commented:
nevermind i found it

<div style="clear:both;"></div>
just before closing banner div
0
 
GranModCommented:
PAQed with points refunded (50)

GranMod
Community Support Moderator
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now