Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS best practice for floating divs?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #31598
    cybershot
    Participant

    I have an issue that I am trying to solve. I have created a box. Lets say it is 600px wide. inside the box, I have two smaller divs. one is 130px floated left and the other is 380px floated right. The box looks good and everything is lined up the way I want it to be.

    The problem
    In the left box, I have just a picture. In the right box, I have a short description with some other text. When the description and other information reaches the bottom of the image on the left, it wraps around the image and starts from the far left of the parent box. I don’t want that. I want the image to stay on the left and the description to stay on the right. But when you float the image, it no longer takes 100% height of the box. So what is the best way to solve this issue?

    #60875
    LadynRed
    Member

    When you use floats, you must clear those floats. The most commonly used method is to use either overflow: auto or overflow: hidden. With such a narrow column, it may not be necessary to float them inside the 130px left column. If you float the image in side the left column, then you need to clear that float. You must also clear the floats of the 2 columns, so the overflow property would go onto the div that contains those 2 boxes.

    If you put the text into the 380px right-floated box, and you have defined the widths of both divs in your css, then the text in the right column should stay within that box.

    #60702
    cybershot
    Participant

    that’s right, I forgot about the overflow: hidden

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.