I am trying to put two columns below one column, with a column on the right along side the entire thing.
the outcome would be something like:

B A N N E R
NAVIGATION
LEFTCONTENT__R
VERT1 VERT2__I
____________ G
____________ H
____________ T
FOOTER
COPYRIGHT

The problem is getting the right column to align properly. It keeps posting below the left content column. Clicking on the banner will show you that the left and right can line up properly. I will link you to the page in progress, but it will be changing a lot as I fumble with it so it may not be a good reference.
http://www.echo313.com/stella/index.php?categoryid=5

<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="content">
<div class="content">

<div id="column_left">
<div class="column_left">

left column content here
</div>
</div>

<div id="plugin_left_vert_1">
<div class="plugin_left_vert_1">

left vertical 1 content
</div>
</div>

<div id="plugin_left_vert_2">
<div class="plugin_left_vert_2">

left vertical 2 content
</div>
</div>

<div id="column_right">
<div class="column_right">

right column content

</div>
</div>

<div class="clear"></div>

</div>
</div>

footer here
copyright here
</div>
</body>
</html>

I can post some messy css too if you need it.

Thanks in advance for you assistance.

Recommended Answers

All 2 Replies

I am trying to put two columns below one column, with a column on the right along side the entire thing.
the outcome would be something like:

B A N N E R
NAVIGATION
LEFTCONTENT__R
VERT1 VERT2__I
____________ G
____________ H
____________ T
FOOTER
COPYRIGHT

The problem is getting the right column to align properly. It keeps posting below the left content column. Clicking on the banner will show you that the left and right can line up properly. I will link you to the page in progress, but it will be changing a lot as I fumble with it so it may not be a good reference.
http://www.echo313.com/stella/index.php?categoryid=5

<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="content">
<div class="content">

<div id="column_left">
<div class="column_left">

left column content here
</div>
</div>

<div id="plugin_left_vert_1">
<div class="plugin_left_vert_1">

left vertical 1 content
</div>
</div>

<div id="plugin_left_vert_2">
<div class="plugin_left_vert_2">

left vertical 2 content
</div>
</div>

<div id="column_right">
<div class="column_right">

right column content

</div>
</div>

<div class="clear"></div>

</div>
</div>

footer here
copyright here
</div>
</body>
</html>

I can post some messy css too if you need it.

Thanks in advance for you assistance.

Declare the right column before left column in HTML or float left column towards left.

in my opinion the easiest way is to for <div> 'content' input position:relative; then for every <div> inside content like <div id="plugin_left_vert_1"> insert position:absolute; and then give values like
position: absolute;
height: 110px;
width: 200px;
left: 5px;
top: 0px; or
position: absolute;
height: 80px;
width: 400px;
left: 250px;
top: 28px;
check thiis out for every of your <div> inside content <div>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.