...

View Full Version : Simple float issue has me stumped -- I know it's simple



Kevin_M_Schafer
02-14-2012, 05:27 PM
I've run into a snag trying to apply simple floats to an ad on my web page. I'm essentially dealing with four divs. I've placed red borders on three of them, the fourth is an ad. I can't seem to find the right combination of floats to make the ad slip straight upward on the left side. I have the three red-bordered divs where I want them.

I know the solution is staring me in the face.

http://www.theeagleextra.com/tee/index.shtml

Any help would be greatly appreciated.

--Kevin

.

Apostropartheid
02-14-2012, 05:30 PM
I've run into a snag trying to apply simple floats to an ad on my web page. I'm essentially dealing with four divs. I've placed red borders on three of them, the fourth is an ad. I can't seem to find the right combination of floats to make the ad slip straight upward on the left side. I have the three red-bordered divs where I want them.

I know the solution is staring me in the face.

http://www.theeagleextra.com/tee/index.shtml

Any help would be greatly appreciated.

--Kevin

.

Why don't you nest it in #lftsidebar-bracket?

Excavator
02-14-2012, 06:23 PM
Hello Keven_M_Schafer,
When arranging elements, floats come first... like this
li class="w9"><a href="index.shtml">Home</a></li>
<li class="w19"><a href="nav/lte.shtml">Letter to the Editor</a></li>
<li class="w17"><a href="nav/fpi.shtml">Front Page View</a></li>
<li class="w16"><a href="nav/ulp.shtml">Send Us a Photo</a></li> <!-- Opera does not render 16.66% -->
<li class="w20"><a href="nav/snt.shtml">Send Us a News Tip</a></li> <!-- Opera does not render 16.66% -->
<li class="w10"><a href="nav/cu.shtml">Contact Us</a></li>
<li class="w9"><a href="nav/au.shtml">About Us</a></li>
</ul>
<div id="lftsidebar-bracket">Eds</div>
<div id="fpad"><img src="ads/fpads/fp.gif" alt="" border="0" height="594" width="120"></div>

<div id="content-bracket">
<div class="lineswrap">
<div class="rtbx">
<div class="headline">Headline</div>
</div></div>

And this bit -


#lftsidebar-bracket {
width: 113px;
height: 300px;
border: 1px solid #ff0000;
padding: 4px 0px 0px 4px;
margin-top: 6px;
float: left;
}
#fpad {
margin: 6px 0px 0px 0px;
float: left;
clear: left;
}
#content-bracket {
width:427px;
border: 1px solid #ff0000;
margin: 6px 0px 0px 6px;
padding: 0px 4px 4px 4px;
float:left;
}

But it's MUCH easier to do it like Apaostropartheid has suggested, left stuff goes in it's own left column, content stuff in it's own center column and right stuff in it's own right column.
Have a look at a very simple 3 column layout here (http://nopeople.com/CSS%20tips/simple3column/index.html).

Kevin_M_Schafer
02-14-2012, 06:48 PM
Thank you, Apostropartheid. That did it. With the phone ringing and customers coming in to do business, I just couldn't get my head around this. There are never enough hours in the day.

Thanks, Excavator. You helped me on the right side of the page a couple of weeks ago. Like I said, today was one of my weaker moments.

--Kevin

.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum