...

View Full Version : Possible float issue - div won't slide up alongside of another one



Kevin_M_Schafer
01-27-2012, 08:30 PM
I think I'm experiencing a float issue, and it really has me kicked. I've successfully placed my righthand content on the page, but now I want to place some on the left. The first div went into place (Eds), but the Articles content won't scoot up in place. I've tried not floating the first and then floating the second; floating the first and then floating the second; clearing right, clearing left. This really has me puzzled. If anyone has a minute to take a look, I would appreciate it.

Here's a live link: http://www.theeagleextra.com/new/index.html


http://www.theeagleextra.com/testfiles/helpimages/sampleforfloat.png



--Kevin

.

melloorr
01-27-2012, 08:38 PM
try setting margin and padding to 0 for that div

Excavator
01-27-2012, 08:48 PM
Hello Kevin_M_Schafer,
If you add float: left; to your #sdbr-bracket you will see how your market might need re-arranged.

It would proably be easiest to put those right floated elements into a single containing element that you can margin over like a 2-column layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

I've done it here in this example without the right column div. If you put the new CSS in the same location I've quoted here, it will overwrite your original styling.

You will still need to re-arrange the markup then. Floats come first -
.editione-text {
font-family:verdana;
font-weight:bold;
font-size:12px;
color:#1155cc;
margin:4px 0px 0px 20px;
display:block;
text-align:center;
float:left; }

.editione-text:visited {color: #1155c;}
.editione-text:hover {color:#ff0000; text-decoration: none; }
.editione-text:active {text-decoration: none; } /* end subscription info */

#searchparameter,
#vid-container,
#fb-like-box,
#logoeedition-bracket,
#eedition-bracket,
#subscription-bracket
{
clear: none;
float: none;
margin: 0 0 0 540px;
}
#sdbr-bracket {
width:120px;
height:300px;
float: left;
border: 1px solid #bdbdbd;
padding: 4px 0px 0px 4px;
margin-top:6px; }

#sdbr-bracket:hover {
border: 1px solid #4d90fe;
background-color:#f1f5fb; }

#content-bracket {
width:380px;
height:300px;
margin: 6px 0px 0px 6px;
padding: 4px 0px 0px 4px;
border: 1px solid #cacaca;
float:left; }

#content-bracket:hover {
border: 1px solid #4d90fe;
background-color:#f1f5fb; }

Kevin_M_Schafer
01-27-2012, 08:54 PM
Hi Excavator,

Thanks! I'll go ahead and do this right now. I'll report back. Thank you for taking the time.

--Kevin

.

Kevin_M_Schafer
01-27-2012, 09:20 PM
I put a wrap around the right content and floated it right. It worked without changing the markup or using a margin setting.

Thanks for your help!

I think if I were to switch my markup and progressively fill both the left and right sides of the page as I move downward, I wouldn't need the wrap on the right side. Like you said, floats come first.

I'll be working on this.

Thanks for the solution, Excavator. Also, I think you have a new title under your name. Is this right? If so, Congratulations. You've earned it.

--Kevin

.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum