Question

Quick CSS Question. I cannot seem to figure out a very simple CSS/HTML problem. Here’s a JSFiddle.

http://jsfiddle.net/BmM6t/

Basically, these two divs are not resizing to anything less than 100% width:

<div id="main_pic" class="main_div">
       THIS IS WHERE THE MAIN PIC WILL GO.
    </div>
    <div id="signin" class="main_div">
       SIGN IN TO THE SITE!
       <form>
           <label for="name">EMAIL/USERNAME:</label>
           <input type="text" name="name" id="name">
           <label for="email">PASSWORD:</label>
           <input type="text" name="email" id="email">
           <br />
           <input type="submit" value="Let's Play!">
       </form>
    </div>

You’ll see that the two divs with class main_div actually take up the entire width of the screen for some reason (you can see that if you inspect the element) even though their widths are clearly written. When you try to change the width of one of the main_div’s it changes the width but if you inspect the element, it just changes the width of the object and adds padding around it to make sure it still takes up the entire width of the screen.

I’m sure it’s some little error I’ve made but I can’t find it. Thanks for the help!

Answer 1

That’s how divs work, they are block level elements. If you don’t want them to take up the entire with of its container element you can float it or make it inline-block