www.webdeveloper.com
Results 1 to 5 of 5

Thread: Box with fixed width gets pushed down

  1. #1
    Join Date
    Oct 2013
    Posts
    3

    Box with fixed width gets pushed down

    The H3 element below is pushed down the height of the div to its left, even though they both have 0 margins on eachother's facing sides, and no matter what their widths are set to. Only removing the div element let's the h3 move to the top, which is where i want it. Have tried removing their borders, changing their widths and left margins, but still only removing the div box clears the unwanted white space above the h3. Do they really have to be floated to avoid this, even though they don't even touch against each other?


    Code below is original code simplified, the original code validates.

    Code:
    <head>
    <style>
    
    
    div
    { 
     width: 163px;
     height: 111px;
     margin-left: 30px;
     border: 1px solid;
    }
    
    
    div.PatchIntro
    {
    
    }
    
    h3
    {
     width: 223px; 
     padding: 0; 
     margin: 0  62em 0 300px;
     border: 1px solid;
     font-size: 11px;
    }
    
    div.PatchIntro h3 span
    {
     font-size: 10px;
     color: #fff;
     text-align: center;
     margin: 0;
    }
    
    div.keyboard
    {
     width: 200px;
     margin: 0 5px 0 0;
    }
    
    </style>
    </head>
    
    <body>
    
    <div> &nbsp; </div>
    
    
    <h3>This</span></h3>
    
    </body>
    
    </html>

  2. #2
    Join Date
    Oct 2013
    Posts
    3
    *REPOST*

    Pls ignore the 'code' segment in the original post since I forgot to copy the final simplified code before pressing submit here (Hard to believe that this forum allows you to change every damn setting except my own post! I wasn't meant to include class names here, what if it was something more personal posted by mistake... not likely, but possible)

    Here is the code I intended for the original post above:


    Code:
    <head>
    <style>
    
    
    div
    { 
     width: 150px;
     height: 150px;
     margin-left: 200px;
     border: 1px solid;
    }
    
    
    
    h3
    {
     width: 200px; 
     padding: 0; 
     margin: 0  0 0 450px;
     border: 1px solid;
    }
    
    </style>
    </head>
    
    <body>
    
    <div> &nbsp; </div>
    
    
    <h3>This is pushed down by the div</h3>
    
    </body>

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,472
    Hi there needhelp1,

    and a warm welcome to these forums.

    The div and the h3 are both block elements and,
    as such, are displaying correctly as you coded them.

    How do you want them to appear, side by side?

    If that is the case, try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    div {
        float:left; 
        width:150px;
        height:150px;
        margin-left:200px;
        border:1px solid #000;
     }
    h3 {
        float:left; 
        width: 200px;  
        margin: 0  0 0 100px;
        border:1px solid #000;
     }
    </style>
    
    </head>
    <body>
    
    <div></div>
    
    <h3>This is pushed down by the div</h3>
    
    </body>
    </html>
    
    
    coothead
    Last edited by coothead; 10-25-2013 at 05:47 AM. Reason: added example code

  4. #4
    Join Date
    Oct 2013
    Posts
    3
    Thank you, that's what I was wondering, whether floats would be necessary, thought merely reducing their widths would be enough since they would leave empty spaces beside them.

  5. #5
    Join Date
    Nov 2013
    Location
    new york
    Posts
    68
    Do not forget four values of margin left right top bottom.
    And do not forget to give clear fix.
    Those problems comes mainly because of margin and floating only.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles