simple float??

[dadamssg]

i have a content div and then a box div that lies within the content div. Its a small square that i want to float right. I also want the text within the content div to wrap around the square...whats happening now is the text goes to the very top of the content div and just pushes the square(thats suppose to be in the top right corner of the content div) down. The words won't hit the square and start a new line...im confused

 

html

<div id="content">
	 d;lkasjg;lksajd lkfj as;lkjf salkjf dsa;lkfja flaj f;lkajs f;lksajdf ;lksajf s;lkjf s;lkfjs af;lkjsa f;lksajf ;ls
akjf sa;lkdjf sad;lkjf sa;lkjsa f;lkjsa f;lkdsajf dsa;lkjf 
	   <div id="rightcolumn">

	 </div>
	 </div>

 

css

#content
{
border: px solid #F8FFE6;
width: 1090px;
height: 700PX;
margin-top: 10px;
margin-bottom: 10px;
background-color: #FFF;
float: left;
clear: left;
padding-right: 10px;
}

#rightcolumn
{
margin-top: 10px;
float: right;
background-color: #562F32;
width: 345px;
height: 270px;
}

[Ken2k7]

By default, DIVs are block displayed. Though if you just want an image, just use an IMG tag.

[dadamssg]

how do i change the block display?( if thats my problem) i want to treat the right column div like a short column that ill place links and other content in. i just want it to stay in place and not get pushed down

[Ken2k7]

Change it to display inline.

[dadamssg]

changing the content div to display: inline; just wraps the div around the text i put in the content div....while display: inline; in the rightcolumn div does nothing....??

[TheFilmGod]

1) Move the right column div to be the first child the parent div. So push it above the text.

 

2) You need to clear your floats. Add overflow: auto; in the parent div's css.

 

3) Display: block; does not need to be stated. A floated div automatically inherits display: block;

 

4) Add content in the right column div. There isn't anything in there at the moment.

[dadamssg]

hey thanks that helped...what exactly does the overlow part do?

[TheFilmGod]

hey thanks that helped...what exactly does the overlow part do?

 

Overflow: auto; clears your float. A floated div is partly taken out of the flow of the content. I say partly because it pushes things down, but past the parent div, things would "ignore" the div. Is pretty complicated, but once you start floating divs all over the place you'll know exactly what I mean.