Quick help coding my header div

Discussion in 'CSS' started by HiLoRoller, Nov 14, 2007.

0
  1. #1
    What would be the proper way to code the following (with divs and CSS):

    I want my logo centered on the top of the page (yes, that part is easy) and a Search Box that is positioned all the way to the right (10px from the edge).
    I don't want the search box to be lower on the page than the logo, so do I float it?

    (Sorry, kind of a noob question, just want to make sure I'm doing it right.)

    Thanks :)
     
    HiLoRoller, Nov 14, 2007 IP
  2. bonzay

    bonzay Peon

    Messages:
    54
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Not sure if I got you right. Is this what you are trying to get:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#logo {
	margin-top:10px;
	margin:0 auto;
	width:300px;
	border:1px solid black; }
#search {
	position:absolute;
	top:10px;
	right:10px; }
</style>
</head>

<body>
<div id="logo">
	I am a logo.
</div>
<div id="search">
	<input type="text"><input type="button" value="search">
</div>
</body>
</html>
    HTML:
     
    bonzay, Nov 14, 2007 IP
  3. deques

    deques Peon

    Messages:
    206
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    above code

    replace these lines:
    margin-top:10px;
margin:0 auto;
    Code (markup):
    with
    margin: 10px auto 0 auto;
    Code (markup):
    a margin top was set, but then later reset.
     
    deques, Nov 14, 2007 IP
  4. bonzay

    bonzay Peon

    Messages:
    54
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yes, tried that. But strangely, it won't work in IE 7...
     
    bonzay, Nov 14, 2007 IP
  5. CollyMellon

    CollyMellon Peon

    Messages:
    749
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I would just create a container DIV the width of your header and contain 2 floating DIVs inside it to hold the logo and search like this:

    #Top{
    width: 800px;
    height: 100px;
    }

    #TopLeft{
    width: 400px;
    height: 100px;
    float: left;
    }

    #TopRight{
    width: 400px;
    height: 100px;
    float: left;
    text-align: right:
    padding-right: 10px;
    }


    <div id="Top">

    <div id="TopLeft">Your logo \ img will go here</div>

    <div id="TopRight">Your search will go here</div>

    </div>

    Let me know how you get on.

    EDIT - Just adjust the width's to suit your alignment
     
    CollyMellon, Nov 14, 2007 IP