1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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