PDA

View Full Version : im trying to not use absolute positioning for two content divs but can't


silverglade
05-11-2009, 02:52 PM
hi, i had to use absolute positioning to position my 2 content text columns, when i try to position the top content div to the right, it interferes with the links div above it and pops way down on the page. if anyone can please let me know how to position both of my content divs without absolute positioning id greatly appreciated it. derek

here is the page im talking about

http://derekvanderven.com/global_industries/index.html

here is the css for the page.

the divs are #bottom_content and #top_content.

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
padding: 0;
background-color: #4E7272;
}
#wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background.jpg);
background-repeat:no-repeat;
}
#toplinks {
font-weight:bold;
width:400px;
height: 70px;
float:right;
clear: both;
margin: 100px 20px 0 0;
}
#toplinks ul {
list-style-type:none;
margin:0;
padding:0;
}
#toplinks ul li {
display:inline;
margin:0 3px;
line-height:1.5em;
}
#toplinks ul li a:link, #toplinks ul li a:visited {
color:#fff;
text-decoration:none;
height:1.8em;
}
#toplinks ul li a:hover, #toplinks ul li a:active{
color:#375B97;
text-decoration:none;
}
#bottom_links {
width: 200px;
height: 300px;
clear: both;
float: right;
margin: 700px 90px 0 0;
background: url(blue-bg.gif) repeat-x;
}
#bottom_links ul li a:link, #bottom_links ul li a:visited {
font-weight:bold;
color:#375B97;
text-decoration:none;
font-size:150%;
display:block;
height:1.8em;
}
#bottom_links ul li a:hover, #bottom_links ul li a:active{
color: #000;
text-decoration:none;
}
#bottom_links ul li {
position:relative;
left:-20px;
list-style-type:none;
}
#top_content {
width: 500px;
position: absolute;
margin: 475px 0 0 120px;
}
#bottom_content {
width: 500px;
position: absolute;
margin: 750px 0 0 120px;
}

/****************************WRAPPERS************** *******/

#started_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background_started.jpg);
background-repeat:no-repeat;
}

#faq_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( faq_final.jpg);
background-repeat:no-repeat;
}

#book_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( book_background.jpg);
background-repeat:no-repeat;
}

#solutions_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background_solutions.jpg);
background-repeat:no-repeat;
}

#contact_wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 1274px;
background-image: url( background_contact.jpg);
background-repeat:no-repeat;
}

#contactinfo {
width:50%; /* puts the box near center by its size compared to whole width*/
float:right; /*<!-- top 0, (right left 0) , bottom 5 --> /* a margin of 5em bottom pushes down the form content */
margin-top: 1em;
margin-right: 0;
margin-bottom: 3em;
margin-left: 0;
line-height:100%;
padding-top: 10px;
}



#contactform {
width: 60%; /* this box flows right under the contactinfo box naturally? */
float:right;
margin-top: 1.5em;
clear:both ;
margin-right: 7em;
}
#contactform label {
float:left; /* floats inputs left, then pushes them 120 to the right*/
width:120px;
}
#contactform input, #contactform textarea {
clear:right;
}

and here is the html for the page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if lte IE 7]>
<link href="iefixes_instruction.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="global_instruction.css" rel="stylesheet" type="text/css">
<title>Global Industries Home</title>

</head>




<body>
<div id="wrapper">
<div id="toplinks">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="started.html">Started</a></li>
<li><a href="faq.html">FAQ's</a></li>
<li><a href="book.html">Book</a></li>
<li><a href="solutions.html">Solutions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

<div id="bottom_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Forum</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

<div id="top_content">
<p><strong>Global Industries</strong></p>
<p>Global Industries industriously provides global offshore construction and
support services including pipeline construction, platform installation and
removal, and diving services to the oil and gas industry in the all of the
world's major offshore oil patches. </p>

<p>Global's services include pipeline installation pipelay, simultaneous
multiple pipeline laying, pipeline burial, and pipeline maintenance and
repair. Global installs pipelines, insulated pipe-in-pipe, and bundled
flowlines. </p>
</div>

<div id="bottom_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultrices, erat eu pulvinar placerat, felis dui pellentesque nisi, a
eleifend turpis enim a libero. Duis id massa non quam accumsan volutpat.
Praesent ornare nisl at tortor. Nullam justo lectus, suscipit at,
euismod sit amet, facilisis eget, sem. Sed elit augue, convallis
aliquam, egestas eu, porttitor quis, purus. Praesent ac risus id ante
gravida vulputate. Quisque eu libero. Nullam ac nunc. Proin adipiscing
ligula et orci hendrerit scelerisque. Sed vitae metus quis odio euismod
pulvinar. Etiam enim nulla, aliquam vel, hendrerit eu, semper sed,
turpis. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Nunc a odio at ligula luctus euismod.
Donec vel erat ac felis hendrerit convallis. Nulla lectus. Donec nec
ligula.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultrices, erat eu pulvinar placerat, felis dui pellentesque nisi, a
eleifend turpis enim a libero. Duis id massa non quam accumsan volutpat.
Praesent ornare nisl at tortor. Nullam justo lectus, suscipit at,
euismod sit amet, facilisis eget, sem. Sed elit augue, convallis
aliquam, egestas eu, porttitor quis, purus. Praesent ac risus id ante
gravida vulputate. Quisque eu libero. Nullam ac nunc. Proin adipiscing
ligula et orci hendrerit scelerisque. Sed vitae metus quis odio euismod
pulvinar. Etiam enim nulla, aliquam vel, hendrerit eu, semper sed,
turpis. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Nunc a odio at ligula luctus euismod.
Donec vel erat ac felis hendrerit convallis. Nulla lectus. Donec nec
ligula.</p>
</div>
</div>
</body></html>