SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 divs next to eachother but entering text moves them?

    i've managed to get the 3 divs next to eachother but now when i enter a text the div moves up or down?
    heres the code:
    Code HTML4Strict:
    :
    <html>
    <head>
    <body>
    <title>ImadTest</title>
    <link rel="stylesheet" type="text/css" href="stylesheetmodelready.css">
    </head>
    <body>
    <div class="wrapper">
    	<div class="header">
    	header
    	<a href="http://www.fussballdaten.de" target="new"><img src="bayern2.gif" border="0" title="BayernLogo"></a>
    	</div>
    	<div class="menu">
    	menu
    	<a href="http://www.fussball-web-shop.de/shop/index.php?lang=DEU&list=BAYERN-M%DCNCHEN%20FANAR" target="new">To WebShop</a>
    	<br />
    	<a href="http://www.fcbayern.telekom.de/de/mannschaften/profis/index.php?fcb_sid=1a702b8c99685e679715a05c4fb001ea" target="new">Team</a>
    	<br />
    	<a href="http://www.fcbayern.telekom.de/de/mannschaften/profis/index.php?fcb_sid=1a702b8c99685e679715a05c4fb001ea" target="new">Team</a>
    	</div>
    	<div class="content">
    	content
    	</div>
    	<div class="extras">
    	extras
    	</div>
    	<div class="footer">
    	footer
    	</div>
    </div>
    </body>
    </html>


    Code CSS:
    :
    body {
      margin:auto;
      padding:0px;
      background-color:#1b7b7c;
    }
    p {
      color:#ffffff;
      font-family:verdana, arial; 
      font-size:12px;
      line-height:100%;
    }
    div.wrapper {
      background-color:#ffa;
      width:800px;
      height:100px;
      margin:auto;
    }
    div.header {
      background-color:#ffa;
      width:800px;
      height:100px;
    }
    div.menu {
      background-color:#ff5;
      margin-right:-4px;
      width:150px;
      height:300px;
      display:inline-block;
    }
    div.content {
      background-color:#ffd;
      margin-right:-4px;
      width:540px;
      height:300px;
      display:inline-block;
    }
    div.extras {
      background-color:#ff5;
      width:110px;
      height:300px;
      display:inline-block;
    }
    div.footer {
      background-color:#afa;
      width:800px;
      height:100px;
    }
    td {
      color:white;
      font-family:arial,verdana;
      font-size:12px;
    }
    a {
      color:white;
      text-decoration:none;
    }

    Thanks for the help
    Attached Images Attached Images
    Last edited by ralph.m; Feb 24, 2011 at 05:47. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try adding this to the top of your style sheet:

    Code:
    html, body, div,
    h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
    form, fieldset, legend, label, textarea, 
    span, em, strong, sub, sup, cite,
    table, tbody, td, tfoot, th, thead, tr, tt,
    dl, dt, dd, ol, ul, li {
        margin: 0;
        padding: 0;
    }
    It could just be default margins on your paragraphs.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The gaps are causes by collapsing margins where the margin on teh p element will collapse onto the parent and move the parent away from the element above (and vice versa for the bottom margin and elements at the bottom of the page).

    You can stop the margin collapse if you add a 1px padding top and bottom to those containers.

    The reset Ralph gave you above will set the elements on an even footing with regards to margin and padding but you will still need to set margins to space things apart where required (e.g. p{margin:0 0 1em}).


Tags for this Thread

Bookmarks

Posting Permissions

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