Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. CSS floating div question

CSS floating div question

Scheduled Pinned Locked Moved Web Development
helpquestioncssarchitecturetutorial
2 Posts 2 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    matthias s 0
    wrote on last edited by
    #1

    Hi there, I have a div in which I'd like to have a couple of floating divs. My problem is, the outer div has a border. But the border does not wrap around the floating divs inside. What am I doing wrong? a simple example:

    box 1

    box 2

    box 3

    .outer {border:solid 1px #000;} .inner {float:left; width:50px;} Can anyone help? Please note that I do not want to specify a width for the outer div, since it should fill whatever it is placed in. Thanks in advance! Matthias /matthias I love deadlines. I like the whooshing sound they make as they fly by. [Douglas Adams]

    G 1 Reply Last reply
    0
    • M matthias s 0

      Hi there, I have a div in which I'd like to have a couple of floating divs. My problem is, the outer div has a border. But the border does not wrap around the floating divs inside. What am I doing wrong? a simple example:

      box 1

      box 2

      box 3

      .outer {border:solid 1px #000;} .inner {float:left; width:50px;} Can anyone help? Please note that I do not want to specify a width for the outer div, since it should fill whatever it is placed in. Thanks in advance! Matthias /matthias I love deadlines. I like the whooshing sound they make as they fly by. [Douglas Adams]

      G Offline
      G Offline
      Guffa
      wrote on last edited by
      #2

      As the outer element doesn't have any non-floating elements in it, there is nothing that gives it height. Add a <div class="Clear"></div> as the last element in the outer div. Add a style: .Clear { clear: both; height: 0; overflow: hidden; }

      --- "Anything that is in the world when you're born is normal and ordinary and is just a natural part of the way the world works. Anything that's invented between when you're fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it. Anything invented after you're thirty-five is against the natural order of things." -- Douglas Adams

      1 Reply Last reply
      0
      Reply
      • Reply as topic
      Log in to reply
      • Oldest to Newest
      • Newest to Oldest
      • Most Votes


      • Login

      • Don't have an account? Register

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • World
      • Users
      • Groups