birdwing
December 7th, 2008, 11:23 AM
I'm having some trouble placing elements on the page... I'm not sure if its just a FF/safari issue or if I'm just doing something wrong.
The project images wont line up where there supposed to (under current projects heading)
They line up under the entire container div
This is how the div's are nested:
<div id="content">
<div id="updates">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra pellentesque nisl. Nam euismod tempus odio. Fusce imperdiet hendrerit ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam egestas feugiat diam. Duis ut neque. Maecenas neque odio, dapibus et, interdum ut, laoreet a, augue. Proin non ligula quis sem sagittis auctor. Suspendisse hendrerit posuere nunc. Sed iaculis fermentum lacus. Sed eu metus et eros fringilla posuere. Suspendisse vel pede. </div>
</div>
<div id="projects">
<img src="images/proj1.gif" alt="Project 1">
<img src="images/proj2.gif" alt="Project 2">
<img src="images/proj3.gif" alt="Project 3">
</div>
</div>
And this is the CSS I am using to try and place the elements:
#main #content {
background-image: url(images/content_bg.gif);
background-repeat: no-repeat;
background-color: #C0D0BA;
background-position: center top;
width: 1010px;
height: 346px;
float: left;
}
#main #content #updates {
background-color: bedbbb;
border-color: #303030;
border: 1px;
position: relative;
float: left;
left: 14px;
top: 10px;
width: 300px;
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
padding: 10px;
}
#main #content #projects {
position: relative;
float: left;
right: 14px;
top: 10px;
}
As you can tell from the link: http://www.birdwingfx.com/testweb/main.html
The updates Div is aligning properly, but not the projects.
I've tried clear left right and all on both the projects and updates divs. I cant seem to find this bug. Of course I don't have IE on my mac so I can't tell if its an issue with my browser or not.
The project images wont line up where there supposed to (under current projects heading)
They line up under the entire container div
This is how the div's are nested:
<div id="content">
<div id="updates">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra pellentesque nisl. Nam euismod tempus odio. Fusce imperdiet hendrerit ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam egestas feugiat diam. Duis ut neque. Maecenas neque odio, dapibus et, interdum ut, laoreet a, augue. Proin non ligula quis sem sagittis auctor. Suspendisse hendrerit posuere nunc. Sed iaculis fermentum lacus. Sed eu metus et eros fringilla posuere. Suspendisse vel pede. </div>
</div>
<div id="projects">
<img src="images/proj1.gif" alt="Project 1">
<img src="images/proj2.gif" alt="Project 2">
<img src="images/proj3.gif" alt="Project 3">
</div>
</div>
And this is the CSS I am using to try and place the elements:
#main #content {
background-image: url(images/content_bg.gif);
background-repeat: no-repeat;
background-color: #C0D0BA;
background-position: center top;
width: 1010px;
height: 346px;
float: left;
}
#main #content #updates {
background-color: bedbbb;
border-color: #303030;
border: 1px;
position: relative;
float: left;
left: 14px;
top: 10px;
width: 300px;
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
padding: 10px;
}
#main #content #projects {
position: relative;
float: left;
right: 14px;
top: 10px;
}
As you can tell from the link: http://www.birdwingfx.com/testweb/main.html
The updates Div is aligning properly, but not the projects.
I've tried clear left right and all on both the projects and updates divs. I cant seem to find this bug. Of course I don't have IE on my mac so I can't tell if its an issue with my browser or not.