SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot maxdream01's Avatar
    Join Date
    Feb 2011
    Location
    USA
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Positioning problems

    Hey everyone,
    im having problems with positioning a few divs heres my problem:

    I'm trying to get the header div to spread across the screen at the top (width = 100%) and at a fixed height of 100px. I also want to get the banner div to be floated to the left of the header div and also be inside the header div and have the search div positioned to the far right and inside the header div. Finally i want the actual search bar (searchbox div) at the bottom of the header div. But no matter how i try it i cant seem to get all these to work at the same time.

    Heres my HTML
    HTML Code:
    <div class="header">
    	<div class="banner">
    		<h1 class="title">Title</h1>
    	</div>
    	<div class="search">
        <div class="searchbox">
    		<form action="search.php" method="get">
            <label>Search</label>
            <input  name="search" type="search" />
            <input type="submit" />
    		</form>
        </div>
    	</div>
    </div>
    and here is the CSS:

    Code:
    div.header{
    	border:1px #000 solid;
    	width:auto;
    	height:100px;
    	margin-top:5px;
    	float:left;
    }
    div.banner{
    	float:left;
    	height:100px;
    	width:auto;
    }
    div.search{
    	display:block;
    	border:1px #000 solid;
    	float:right;
    	margin-right:5%;
    	width:auto;
    	height:100px;
    	position:absolute;
    }
    div.searchbox{
    	position:relative;
    	bottom:0;
    }
    Thanks
    PHP is FUN

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Try something like this:

    Code:
    div.header {
    	border:1px #000 solid;
    	width:100%;
    	margin-top:5px;
            overflow: hidden;
            position: relative;
    }
    
    div.banner{
    	float:left;
    	height:100px;
    }
    
    div.search{
    	border:1px #000 solid;
    	margin-right:5%;
    	position:absolute;
            right: 0;
            bottom: 0;
    }

    You should probably set a width for the banner and the search div (other than auto). You don't need the searchbox div at all.

  3. #3
    SitePoint Zealot maxdream01's Avatar
    Join Date
    Feb 2011
    Location
    USA
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that worked perfectly, i was playing around with margins before your post and had almost got it to work but this does so much better, thanks. While, we're discussing this, i was wondering how one could, make the header div span only say a two thrds of the page and center it while also accomplishing this, because im noticing that the header spanning the entire widt of the page isnt what im looking at could i do something like set the left and right margins to auto and set a standard width on the header div like 900px?
    PHP is FUN

  4. #4
    SitePoint Zealot maxdream01's Avatar
    Join Date
    Feb 2011
    Location
    USA
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never-mind, that's exactly what i did and it worked out, thanks anyway though.
    PHP is FUN

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maxdream01 View Post
    could i do something like set the left and right margins to auto and set a standard width on the header div like 900px?
    Yep, that's the way to go. Sometimes you might want a background color on the header section to extend across the whole screen, in which case, have an outer div width: 100% with the bg color on it and then the inner div centered like you have.

  6. #6
    SitePoint Zealot maxdream01's Avatar
    Join Date
    Feb 2011
    Location
    USA
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thank you for the advice. I'll see if i like how that looks for site.
    PHP is FUN


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
  •