1 reply [Last post]
Newone
Offline
newbie
Last seen: 5 years 17 weeks ago
Joined: 2009-03-23
Posts: 1
Points: 0

I try to create a form layout where first few rows should be shifted to the right by an image that floats to the left. This is what it looks like:

<script>
.spacer
 {
	clear: both;
	overflow: hidden;
	height: 0px;
	font-size: 1px;
}
</script>
 
<div style = "float:left;">
    <img width = "200px" src = ""/>
    <div>Some link here</div>
</div>
 
<div class = "FormRow">
    <label for = "Login">Login:</label>
    <input id = "Login"/>
    <div class="spacer">&nbsp;</div>
</div>
 
<div class = "FormRow">
    <label for = "Password">Password:</label>
    <input id = "Password"/>
    <div class="spacer">&nbsp;</div>
</div>
 
And so on...

But the second row apears below my image container and not to the right. This is caused by Div-spacer. Does anybody know what to do?

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 3 years 35 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Couple things: 1) You

Couple things:

1) You should really post all of your code for us to help. By looking at what you posted, I see divs with a class set to them that has no code to back it up, I have no idea if you have a doctype, or even if you have your code enclosed in and tags (at the very least).

2) I'm not honestly sure what part isn't showing up for you. You say your "second row" .. would that be the "password" part of the form? I tested this in FF and IE7, and both of your form rows show to the right of the image.

I'm assuming that with how you are going about this, you might run into the same issue that comes up a lot when floating an image to the left or right of a lot of text. The issue being that once the text gets long enough, it wraps beneath the image, instead of staying in line leaving white space under the image.

I would lose the spacer divs, and set my code up something like:

<div style="float: left;">
    <img width = "200px" src = ""/>
    <div>Some link here</div>
</div>
 
<!-- Wrap your form divs inside another div floated to the right to ensure that your rows don't wrap under the image -->
<div style="float: right;">
    <div class = "FormRow">
        <label for = "Login">Login:</label>
        <input id = "Login"/>
    </div>
 
    <div class = "FormRow">
        <label for = "Password">Password:</label>
        <input id = "Password"/>
    </div>
</div>

One thing though.. you should really set the widths of divs if/when floating them. If you don't, you can run into issues as well.

If none of this answers your specific question, please post more info including "all" of your code!