3 floating div's on a horisontal line!?!

Discussion in 'CSS' started by jmansa, Sep 3, 2008.

0
  1. #1
    Im trying to make 3 different div tags on a horisontal line, and is actually not having problem with that... The problem is that the third div (right) is not selectable.

    Thje first div is a logo all the way to the left. the second is a submitform which should be at absolute center of page at any time. The third is also a submit form which should stay all the way to the right... It is here my problem is. My middle div is set to width:100% for staying in the center at all time, and I think that this is the issue... Here is what I have done.

    div#header {
	height: 60px;
	background: url(images/header_back.png);
	z-index:1;
	width:100%;
}
div#logo {
	height: 50px;
	width: 175px;
	background: url(images/logo.png) no-repeat;
	margin-top:0px;
	float:left;
	position:absolute;
	z-index: 3;

}
div#linkform {
	width:100%;
	color:#CCCCCC;
	position:absolute;
	text-align:center;
	margin:0 auto;
	margin-top:13px;
	z-index: 2;
	display:block;
}
div#login {
	float:right;
	display:block;
	color:#CCCCCC;
	margin-top:10px;
	margin-right: 20px;
	position:absolute;
	z-index:3;
}
    Code (markup):
    And this is how it is set up...

    <div id="header">
<div id="logo"></div>
<div id="link-form"></div>
<div id="login"></div>
</div>
    Code (markup):
    Please help :)
     
    jmansa, Sep 3, 2008 IP
  2. mypsdtohtml

    mypsdtohtml Guest

    Messages:
    96
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi

    Try to setup not in porcentage but using pixels, sometimes CSS is not good with this things.
    Did you put in every div float:left? That's important.
     
    mypsdtohtml, Sep 4, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    100% means 100% of whatever it's inside - in this case #header... as such there's no room for the existing DIV's it's floating inside. 100% + 175px + 20px and god knows how much since you aren't even stating a width > 100% of header width.

    Basically, if #header is 700px, you are saying #link-form should be 700px wide when you say 100% - do you see the problem?

    NOT that it's going to work worth a damn either since you are declaring position:absolute... which makes me wonder what it is you are even trying to do here.

    NOT that I would have a DIV around what are obviously forms (it would go inside them), or use a DIV for a logo... and I somewhat doubt that #header (the entire DIV) is needed either.

    Though I'd have to see your actual CONTENT and what you want it to look like before making any attempt at coding this. Without the content you are putting into it the HTML is pointless and the CSS means nothing... In fact if you are working on your layout in CSS without full content plugged into those DIV's, you probably need to start over.

    As I keep saying, CONTENT first, THEN start dicking with the layout in CSS, then and ONLY then do you go into your goof-assed paint program to hang graphics on it.
     
    deathshadow, Sep 4, 2008 IP