...

View Full Version : Page alignments



<(^^<)KIRBY
01-26-2005, 09:49 PM
Ok, so here's what I need done. I have a little bit of text on the left side, and I want a picture on the right. So, in essence, I want:

........Header..........
Text...........PICTURE
Text.......... PICTURE
Text...........PICTURE
Text...........PICTURE

the "PICTURE"s are all one big picture. the text will be different lines of text. I have my text left aligned, and my picture right aligned. problem is, right now it looks like:
......Header............
..............PICTURE
..............PICTURE
..............PICTURE
..............PICTURE
Text
Text
Text
Text

I don't know how to fix it... I have my menu on the left side, along with my CSS buttons and what not.

Graft-Creative
01-27-2005, 12:20 AM
Sounds like you need to apply the float property to one or both of your divs.

Can you post the code so we can take a closer look please?

Gary

<(^^<)KIRBY
01-27-2005, 09:31 PM
Main Page:

<html>
<title> Marcon Precast Inc.</title>
<LINK TYPE="text/css" HREF="styles/Marcon.css" REL="stylesheet">
<body>
<div id="left">
<br>
<br>
<img src="pictures/marconLogo.gif">
<div id="navlist">
<ul id="navlist">
<li><a href="index.html" title="home">Home</a></li>
<li><a href="projects.html" title="prior">Previous Projects</a></li>
<li><a href="staff.html" title="staff">Staff</a></li>
<li><a href="concrete.html" title="ITD">Products</a></li>
<li><a href="contact.html" title="contact">Contact Us</a></li>
</ul>
</div>
</div>
<div id ="content">
<br><br>
<br><br>
<br><br>
<br><br><br>
<center>
<img src="Pictures/good.gif">
<h2> Good Grade</h2>
<br></center>
<ul>
<li>Few significant cracks or chips on either side</li>
<li>Appropriate for:</li>
<ul>
<li>traffic control</li>
<li>limiting access</li>
</ul>
</ul>
</div>
</div>
</body>
</html>

<(^^<)KIRBY
01-27-2005, 09:32 PM
CSS:

body {
background: #E8E8E8;
font: 14px Verdana, sans-serif;
}
#left {
width: 159px;
height: 900;
background: url(../Pictures/crackback.gif);
float: left;
margin-right: 20px;
}
#right {
width: #75%;
float: right;
}
a:link {color: #104E8B;
text-decoration: none;
background-color: transparent }
a:visited { color: #4169E1;
text-decoration: none;
background-color: transparent }
a:hover { color: #00066;
text-decoration: underline;
background-color: transparent }
a:active { color: #A9ACB6;
text-decoration: underline;
background-color: transparent }
.title { text-align: center}
#navlist
{
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;
}
#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}
#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.8em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #000066;
color: #FFF;
background: #4169e1;
}
#content {
width: auto;
top: 0;
right: 10px;
padding 10px;
z-index: 1;
position: relative;
margin: 0 10px 0px 120;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum