Wondering if anyone can help. I’m putting toegther a website and am having problems with two floating div elements:
div id=“my_image”
div id=“menu”
Basically, I want the my_image element to sit inline with the ending text of the page and not overlap it while also being the same starting height as the wrapper div.
And the menu div to sit inline with the W on the “Welcome Screen” text.
Hi,
Here is one way of doing it. You could just set the #my_image id on the image itself and then nest it in your top #wrapper div. Since that top #wrapper div is only 105px high you could absolute position the #my_image to the top right and it will hang out naturally since it is removed from the flow.
Then just make sure you give proper margins or padding to protect the text from going under the AP image. I set a bottom margin on your h2 to push the first p tag down.
Try this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Template Website</title>
<style type="text/css">
* { padding: 0; margin: 0; }
body {font:12px/20px arial, verdana, sans-serif; background:#FFF }
h1 { font-size:30px; line-height:36px; margin: 0 0 20px 0; color: #005EB3; font-weight:normal;}
h2 { font-size: 18px; padding: 0 0 20px 0; color:#222; font-weight:normal;}
p { color:#666; margin: 0 0 20px 0; }
a { color:#ccc;text-decoration:none; }
[B]#wrapper [/B]{
margin: 0 auto;
width: 970px;
height:105px;
border-top: 2px solid #EEE;
border-left: 2px solid #EEE;
border-right: 2px solid #EEE;
padding: 10px;
background-color: #FFF;
[COLOR=Blue]position:relative;[/COLOR]
}
[B]
img#my_image[/B] {
[COLOR=Blue]position:absolute;
top:0;right:0;[/COLOR]
[COLOR=Blue]z-index:1;[/COLOR]
width:280px;
height:280px;
}
#menu {
font: normal 11px verdana, arial, verdana, helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
background:#EEE;
width:100%;height:35px
}
#menu ul {
overflow:none;
list-style: none;
padding-top:5px;
padding-bottom:1px;
margin-left:210px;
}
#menu ul li {
float:left;
margin-left:10px;
}
#menu ul li a {
color:#666;
display:block;
border:1px solid #FFF;
border-radius: 16px;
-moz-border-radius: 16px; /* Not for IE*/
-webkit-border-radius: 16px; /* Not for IE*/
text-align:center;
padding: 4px 20px;
}
#menu ul li a:hover {
color: #FFF;
background: #CCC;
border: 1px solid #ccc;
}
#maincontent {
margin: 0 auto;
width: 970px;
height:800px;
border-bottom: 2px solid #EEE;
border-left: 2px solid #EEE;
border-right: 2px solid #EEE;
padding:10px;
background-color: #FFF;
}
[B]h2 {margin-bottom:20px;}[/B]
</style>
</head>
<body>
[COLOR=Blue]
<div id="wrapper">[/COLOR]
<img src="images/sd.jpg" width="435" height="100" alt="" />
[B]<img id="my_image" [/B]src="images/s.jpg" width="280" height="280" alt="" />
[COLOR=Blue]</div>[/COLOR]
<div id="menu">
<ul>
<li><a href="#" title="Link Name 1">Homepage</a></li>
<li><a href="#" title="Link Name 2">Link1</a></li>
<li><a href="#" title="Link Name 3">Link2</a></li>
<li><a href="#" title="Link Name 4">Link3</a></li>
<li><a href="#" title="Link Name 5">Link 4</a></li>
</ul>
</div>
<div id="maincontent">
<h1>Welcome Screen</h1>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis diam nunc. Aliquam gravida commodo varius. Etiam vel leo eu lectus semper luctus. Pellentesque accumsan mollis diam et elementum. Morbi vel fringilla mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis diam nunc. Aliquam gravida commodo varius. Etiam vel leo eu lectus semper luctus. Pellentesque accumsan mollis diam et elementum. Morbi vel fringilla mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<!--End maincontent-->
</body>
</html>
