Wrapping text around a <div> (help with Tribute Page)

I’m working on the Tribute Page project CSS and I have a div with an embedded video that I want to get wrapped by the text in the div preceding it so that it nestles in the bottom, left corner. I’ve tried using floats and even when applied to every child div in my tribute-info section nothing happens. I suspect I’ve overlooked something.

<!--This is my basic page structure, focusing just on the tribute-info section-->
<div id='tribute-info'>
     <div id='taxonomy'>
     </div>
     <div id='abilities'>
     </div>
     <div id='video'>
     </div>
</div>

I thought I could use #video {float:right;} to get the abilities div to wrap around the video div and I’d like to do this without restructuring my html (normally the things I float are the first elements, not the last elements) but for some reason it’s not working out. Any insight?

This is my Tribute Page, CSS at line 60 for my attempts at floating.

Would you happen to have an example on another website whereby it has a similar look you’re trying to create? If so, maybe a look at that CSS would help.

To be honest,

Your CSS is a complete mess and it is barely readable for other developers.

Make it more tidy with comment for sections like /=====HEADER======/

and your CSS layout is bad why use this kind of layout section {background:#000;}
Use this layout:

Body {
Background:#000;

}

If you fix that I will help you.

Regards,
Chris

I think I know what I need to do to help myself, now that I’ve had time to think about it. I should just start working out my layouts with different colored boxes before I go to code the page I’m actually work on. I tend to run into issues like this one a lot—what I think is going to happen and what actually happens with my layout are entirely two different things.

@ChrisDitfort, I take the point about tidying and labeling the CSS. It makes sense to me, but I forgot about making it nice for other people (especially since I have yet to find an organization scheme that I actually like and most of the ideas I’ve found only deal with the selectors, not the order of the declarations.)

1 Like

CSS code looks more tidy now.

https://jsfiddle.net/c6L2m4k7/

I would do something like this.

it’s a good idea to implement a wrapper div in your class.

Basically the solution is to set the video and abilities to a 50% widith and float to the left;
Even if you float left but both widths are 100% they will not sit next to each other.
.wrapper{
width: 100%;
}
.wrapper:after{
content:"";
clear: both;
display: block;
}
#video, #abilities{
float:left !important;
width:50%;
}
#video{
margin-top: 35px !important;
}

I mean think of it like this. In your garage maybe you can fit one car. If you try and line two up next to each other they will not fit. To get it to fit one car will have to go behind the other.

That’s what your elements are currently doing. Even if you apply a float to two block level elements you must specify the width of them. so they can float next to each other perfectly. It can be a mix of 70% 30%, or 50% 50%. Work out what side you would like bigger then the other as long as the total adds up to 100%.

Also always apply a clear to the floats so you can resume normal document flow afterwards. In the above example I have applied the clear after the wrapper all in CSS file.

Hope this helps.