Content and Sidebar Divs

bobby9101 · #1 (**permalink**) 07-27-2005, 11:40 PM

I have created a page.
I hvae a sidebar which is a div.
the problem is how do i get the other main content next to it?
it shows up underneath.

http://img29.imageshack.us/img29/9416/newpicture6jg.jpg
I want the pictures next to the siderbar.

here is the code for that

Code:

<html><head>
<style type= "text/css">
h1 {color: #C80000}
h1 {text-align: center}
i {color: teal}
a {color: salmon}				
	body {background-color: #380000}
#linkstable align="left"{background-color: #330000; margin:0 auto;width:18%;}
</style></head></body>
<div id="linkstable">

<h3>Home</h3>

<h3><a href"=contact-us.htm">Contact Us</a></h3>

<h2>Inventory:</h2>

<h3><a href"=tables.htm">Tables</a></h3>

<h3><a href"=seating.htm">Seating</a></h3>

</div>
<a>
[img]monitor.gif[/img]</a>
<a>
[img]camcorder.jpg[/img]</a>
<a>
[img]keyboard.jpg[/img]</a>
</body>
</html>

MuNKyonline · #2 (**permalink**) 07-28-2005, 05:14 AM

Put it in two table columns? Then put the links table in one and the main content in the other.

speed · #3 (**permalink**) 07-28-2005, 05:36 AM

Quote:

Originally Posted by MuNKy

Put it in two table columns? Then put the links table in one and the main content in the other.

Arrgh! He's trying CSS so why go back to tables?

The most basic 2 column layout is:

CSS:

Code:

#sidebar { background-color: #CC99FF; width: 300px; float: left; }
#main { float: left; padding: 1em; }
.clear { clear: both; }

HTML:

Code:

<body>
    <div id="sidebar">
        <ul>[*]Item 1[*]Item 2[*]Item 3[*]Item 4[/list]    </div>
    <div id="main">
        

The body text</p>
    </div>
    <div class="clear"></div>
    

Footer</p>
</body>

I've included a footer for good measure, if you want to get more complex have a look at http://www.alistapart.com/articles/fauxcolumns/

It's possible to build on these basics to build 3 or 4 column layouts such as http://www.cut4cloth.co.uk without tables.

MuNKyonline · #4 (**permalink**) 07-28-2005, 06:08 AM

Just thought that might be easier that's all. Don't really know how to use css that well for positioning - something I should learn too!

bobby9101 · #5 (**permalink**) 07-28-2005, 10:07 AM

I tried that.
I still have the sidebar in the right place.
but the main off to the bottom.
I need to slide that main text up so it is next to the sidebar

ADAM Web Design · #6 (**permalink**) 07-28-2005, 10:16 AM

1. Try taking the padding out of your #main div (if you used speed's suggestion.) Sometimes that can throw things.

If you need padding, what you can do is create a nested div (a div inside a div) containing that padding. I've done this quite a bit, and it hasn't steered me wrong yet.

2. Try style="float: left;" for your images. That should shift them into two rows if they have to.

From there, mess around with it.

WebMasterKrames · #7 (**permalink**) 08-08-2005, 07:30 AM

Quote:

Originally Posted by MuNKy

Just thought that might be easier that's all. Don't really know how to use css that well for positioning - something I should learn too!

I'm very familiar with CSS and let me tell you it's not worth it to sit around and try to make tabular content using 100% CSS. Web browsers will always be able to read tables, anyone who sits around coding tabular content in CSS when they could get the exact same effect in less time either is getting paid by the hour or is just anal and likes looking at code for long periods of time.