A css workaround for this mispositioning problem

hi there all,

I’m having a problem over a site im focusing on where contents in the right side with the page (floated left) move onto the left side side, when the remaining hand side’s height just isn’t long enough to be able to ‘push’ the contents in the right column within correct place (in the correct column)

You can see this here:
http: //d993110. u183. pipeten. corp. uk/knowledge-share/video-library2. php
Please check out this correspdoning screenshot wherever I’ve highlighted the actual mispositioned part:
http: //www. ameliealden. com/gprob/mispositioning. png

Should the content of. column3. firstcol upon that page ‘naturally’ makes. column3 height big enough to help keep those right boxes pushed towards the right, all looks ok just as this screenshot:
http: //www. ameliealden. com/gprob/original. png

But once i start adding new boxes towards the right or reduce content to the left, I understand this mispositioning problem (see very first screenshot and http: //d993110. u183. pipeten. corp. uk/knowledge-share/video-library2. php as above. )

For now We have sorted this in a very hacky way by means of just adding any fixed height that will. column3 (1200px in this case) with inline css:

Code:
< div style=" top: 1200px; " class=" column3 firstcol" >
< h2> Video clip Library< /h2>
< p> View video case studies within the services we produce to our clien.... 

you can easily see this here:
http: //d993110. u183. pipeten. corp. uk/knowledge-share/video-library. php
And in this screenshot:
http: //www. ameliealden. com/gprob/column3firstcol. png

Can anyone tell me how you can ensure those boxes stay on the right without having to assign a length to. column3 whenever

Looks such as you’re missing any float. What I might do is result in a div to float the correct side menu items (Videos, Webinars, Relevnt Links) on the right with any fixed width and then clear everything.

Code:
div#right-side-menu-container drift: right; width: 200px; /* I'm guessing at the width. */
...
< div id=" right-side-menu-container" >
... here the videos, webinars, related links go...
< /div>
... clear both of your floats here...

Thanks TheGAME You have been my saviour about these forums a short while ago!

does this mean accomplishing this:

Code:
< div style=" crystal clear: both; " > < /div> 

after this closing " right-side-menu-container" label

That’s just what exactly it means, yes.

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *