Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post

    [CSS] Divs alignment issue

    Hi all
    I came out with this problem.
    Ideally this should be


    But this is what i got



    The HTML code:
    Code:
    <div id="Header">
    
           <div id="LogoTop_main"><a href="index.php"><img src="images/logo.png"/></a>
           </div>
          
           <div class="Menu_Container"><b> Welcome<br/>
          ---all buttons--
           </div>
    
           <div id="SearchBoxMain>
             <form method="POST" action="search.php">
               <input type="text" name="keyword" size="50" class="FormSpecialInput_1" />
               <input type="hidden" name="type" value="audio" />
               &nbsp;&nbsp;&nbsp;
               <input type="submit" value="Search" name="B2" />
             </form>
           </div>
      
    </div>
    The CSS respective code:

    Code:
    /*Hold the search box, logo and menu*/
    #Header {
            background-color: #E9E9E9;
    	top: 0px;
            margin: 0px auto;
    	width: 900px;
            height:70px;
    }
    
    
    /* Logo on right of page -- and its layers */
    #LogoTop_main {
            display: block;
    	height: 36px;
    	width: 200px;
    	float: left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	color: #999999;
    }
    
    
    /* Logo on right of page -- and its layers */
    .Menu_Container {
            display: block;
    	height: 36px;
    	width: auto;
            margin-right: 10px;
    	float: right;
    	text-align: right;
            font-weight: bold;
    }
    .Menu_Container a{
    	padding-right:5px;
    }
    .Menu_Container a:hover{
    	text-decoration: underline;
    }
    
    
    #SearchBoxMain {
            background-color: #F2F2F2;
            display: block;
            height: 40px;
    	width: 900px;
            clear: both;
    }
    #SearchBoxMain form{
    	margin: 15px auto;
    }
    Whats wrong??
    Thanks in advance
    Last edited by evo; 03-11-2009 at 08:43 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Code:
    <style type="text/css">
    html,body{margin:0;padding:0}
    body{font: 76% arial,sans-serif;text-align:center}
    p{margin:0 10px 10px}
    a{display:block;color: #981793;padding:10px}
    div#header h1{height:80px;line-height:80px;margin:0;
      padding-left:10px;background: #EEE;color: #79B30B}
    div#container{text-align:left}
    div#content{line-height:1.4}
    div#navigation{background:#B9CAFF;}
    div#extra{background:#FF8539}
    div#footer{background: #333;color: #FFF}
    div#footer p{margin:0;padding:5px 10px}
    
    div#container{width:700px;margin:0 auto}
    div#content{float:left;width:350px}
    div#navigation{float:right;width:350px}
    div#extra{float:left;width:100%}
    div#footer{clear:both;width:100%}
    </style>
    </head>
    <body>
    <div id="container">
    <div id="wrapper">
    <div id="content">
    <p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly</p>
    </div>
    </div>
    <div id="navigation">
    <p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
    </div>
    <div id="extra">
    <p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
    </div>
    </div>
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    try that
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • Users who have thanked PitbullMean for this post:

    hernantz (03-11-2009)

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post

    Question Still with problems

    Quote Originally Posted by PitbullMean View Post
    try that
    i tryed that
    but when adapting it to my site
    well see it in action WWW.UNDERZ.COM.AR

    also css seems not to affect the form

    Code:
    .MainBody {
    	background-color: #FFFFFF;
    	text-align:center;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #333333;
            margin: 0px auto;
    }
    
    /*Hold the search box, logo and menu*/
    #Header {
            background-color: #E9E9E9;
            margin: 0px auto;
    	width: 900px;
            height:70px;
    }
    
    
    /* Logo on right of page -- and its layers */
    #LogoTop_main {
    	height: 36px;
    	width: 200px;
    	float: left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	color: #999999;
    }
    
    /* Logo on right of page -- and its layers */
    .Menu_Container {
    	height: 36px;
    	width: 700px;
    	float: right;
            padding-right: 10px;
    	text-align: right;
            font-weight: bold;
    }
    .Menu_Container a{
    	padding-right:5px;
    }
    .Menu_Container a:hover{
    	text-decoration: underline;
    }
    
    #SearchBoxMain {
            background-color: #F2F2F2;
    	width: 100%;
            clear: both;
            padding: 10px auto;
    }

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    OK problem solved, the fact was that the HTML had a " missing on the SearchBoxMain

  • #6
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Good to hear you got it fixed.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.


  •  

    Posting Permissions

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