0

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.

3
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by karol33
0

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.

0

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>

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.