Make a header wrap around <div>

[Dal123]

The big picture underneath header (h3) is a slideshow, the problem is I would like my slideshow flush at the top and the header to wrap around that. Originally I had a problem with the paragraph placed very strangely by the header, so I inserted a <br></br>.
I floated my slideshow to the right, and I'm happy with the text flowing underneath it. Any input appreciated, site is coming close to being finished, big thanks to Angelwatt, and Jim.
Any input appreciated people; layout is a vicious beast Any help is appreciated.

<div id="page_content">
<h3>Formwork RC Heat-Efficient Roof more text here it now</h3>


<div id="case">
<div id="slid_mid">Waterproof Concrete Basement Loading...
<script type="text/javascript">
  //<![CDATA[
  function LoadSlideShow() {
    var feed  = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373908300495958129?alt=rss&kind=photo&hl=en_GB";
    var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
    var ss = new GFslideShow(feed, "slid_mid", options);scaleImages :true;}
  google.load("feeds", "1");
  google.setOnLoadCallback(LoadSlideShow);
  //]]>
</script>
</div>
</div>

<br></br>
<p>Peri Decking used to support 'Bubbledeck' heat-efficient roof. Air is trapped inside the plastic balls and retains heat for longer. The neccessary Decking was erected to details of supplied drawings, the 'Bubbledeck' was delivered to site and lifted in with a crane. The 'Bubbledeck' has a pre-cast concrete base which was temporarily held in position by the Peri Decking. Steel-Reinforcement was fixed in position by qualified Steel-fixers and neccesary Formwork was fixed. Concrete was poured forming a 200mm slab ontop/ attached to the 'Bubbledeck', this Reinforced Concrete is what held the slabs/ 'Bubbledeck in position' once Peri Decking was removed.</p>


<div class="spacer"></div>

a {
text-decoration:none;
}

body {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-color:#FEFFD9;
}

#container {
position:relative;
width:900px;
height:100%;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
border:0px;
background-color:#FEFFD9;
}

#masterhead {
background-image:url(images_site/Graphics/logo_web.gif);
width:900px;
height:118px;
padding:0px 0px 0px 0px;
margin:0px;
}
#masterhead {
margin-left:auto;
margin-right:auto;
}

ul#nav_list li.no_pad {
padding:0px 0px 5px 0px;
margin:0;
float:right;
}

ul#nav_list{
list-style:none;
margin:0px;
padding:0px;
padding:0px;
font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
font-size: 1.8em;
}
ul#nav_list li{
display:inline;
padding:5px 30px 5px 0px;
}


.spacer {
clear:both;
}

#slideShow_1 {
  width : 335px;
  height: 197px;
  padding-right:10px;
  margin-left: 0px;
  margin-top: 0px;
  float:left;
}

#slideShow_2 {
  width : 335px;
  height : 197px;
  padding-right:0px;
  margin-left: 0px;
  margin-top: 0px;
  float:left;
}

#sidebar ul {
list-style-type:none;
font:1em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
margin:0px;
padding:0px;
border:1px solid #000;
float:right;
}

#sidebar li {
background: #CCC;
width:200px;
padding-top:0.5em;
padding-bottom:0.5em;
padding-right:0.3em;
border-bottom:0.1em solid#666;
text-align:right;
}

#footer {
width:900px;
padding:0px;
margin:0px;
}

#page_content {
	width:680px;
	padding:0px;
	margin:0px;
	float:left;
	border:1px solid #000;
}

.sometext_mid   {
	float: left;
	width: 220px;
	text-align: center;
	padding-right: 10px;
	padding-left: 10px;
	padding-top:5px;
	padding-bottom:5px;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

.sometext   {
	float: left;
	width: 220px;
	text-align: center;
	padding-top:5px;
	padding-bottom:5px;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}


.thumbnail {
width:134px;
height:80px;
float:left;
border:none;
padding:0px 2.4px 5px 0px;
}

img {
border:none;
}

h1 {
font-family:"Lucida Grande", Lucida Sans Unicode, sans-serif;
font-size:20px;
line-height:0.3em;
}
h3 {
padding:0;
margin:0;
float:left;
}

p {
font-family:"Tahoma", Verdana, Helvitica, sans-serif;
font-size:14px;
}

#slid_mid {
  width : 335px;
  height: 197px;
  padding:3px;
  margin:0 10px;
  float:left;
  border:1px solid #CCC;
  
}

#centre_slide {
position:relative;
float:right;
}

#case {
float:right;
margin-top:0;
}

 

[angelwatt]

Not sure I follow when you say you want the header to wrap around the slide show. Can you post a pick showing how it displays currently and how you want it to show up? That might help clear things up.

For the br tag, the proper XHTML syntax is: <br/> It's self-closing so doesn't need a separate closing tag.

 

[Dal123]

Sorry they didn't attach properly. Thanks regarding the <br/> tag .

 

[angelwatt]

Something to try; Add position:relative to the #page_content block. Then for #case add top:0. I'm not sure if that works on floated elements. If it doesn't move it flush with the top try removing the float property then also adding right:0 to #case.

Option 2; Move the h3 tag to after the closing div tag for #case. It may work.

If possible, you should try moving the files you're working on to a web host where we can view it live. I use some browser add-ons that let me modify HTML and CSS on the fly to try out possible solutions. It would allow people here to give feedback more easily since we could try it out beforehand instead of waiting for you to try it out.

 

[Dal123]

Thanks angelwatt, what web host can I use, haven't got any hosting yet just registered my domain.
Thanks again .
I did try them things but I haven't had any luck yet.

 

[Dal123]

Quote:
Originally Posted by kedruff View Post
I would also use an advanced selector of li:last-child in my CSS which should work with all browsers.
Limited support for last-child. (No IE support <= v8)

--

In your HTML move the H3 block to after the #case section and before your br tag. Then, in your CSS we'll change the h3's CSS to,
Code:

h3 {
padding:0;
margin:0;
/*float:left; REMOVED */
}

My god, you've done it again angelwatt (saved my site), it was the float:left on my header that was causing it not to wrap.
Thank-you very much angelwatt , site is nearly complete now (thanks to you), be installing virtual pc, to check on internet explorer lol.
Thanks again .

 

[Dal123]

Sorry Incorrect post .

 

[angelwatt]

My god, you've done it again angelwatt (saved my site), it was the float:left on my header that was causing it not to wrap.
Thank-you very much angelwatt , site is nearly complete now (thanks to you), be installing virtual pc, to check on internet explorer lol.
Thanks again .

Hmm, looks like I posted that reply to the wrong one of your threads. Oops. Well, you figured it out where it was meant. The float not wrapping is weird. I didn't think it would behave like that, but that's why it's nice to be able to interact with the code to try things out real quick.

 

[Dal123]

Sorry Incorrect post .

I didn't mean it to you , what happened is I had another problem with my paragraph, and I couldn't figure out what was going wrong; turns out I didn't spell my class correctly . So I deleted my post after a couple of minutes and put the above quote, relevant to my paragraph problem.
I didn't mean it regarding your post though now I can see how it looks (I should've worded it differently), would never be disrespectful to yourself; you've helped me so much, and you're so busy helping me no wonder you placed it in other thread.
Thank-you very much angelwatt, site is really taking shape now, gonna do all my pages then try to load my virtual pc and check on internet explorer (not looking forward to ).
Thanks again buddy, I meant no disrespect by above, it was a pure coincidence regarding misplaced post. I'm embarassed now as it seems I was being a p'''k. I really wasn't just coincidence .

 

[angelwatt]

I didn't mean it to you

I knew what you meant. I had just scrolled up and didn't see what you had quoted there so looked at the other thread of yours and found it there.