...

View Full Version : floating divs



j05hr
11-23-2009, 04:27 PM
I'm trying to get some checkboxes to float next to each other in line.

And I get this,

http://img94.imageshack.us/img94/573/wrong.png (http://img94.imageshack.us/i/wrong.png/) http://img94.imageshack.us/img94/wrong.png/1/w359.png (http://g.imageshack.us/img94/wrong.png/1/)


I want it to look like this,

http://img204.imageshack.us/img204/1198/rightsy.jpg (http://img204.imageshack.us/i/rightsy.jpg/) http://img204.imageshack.us/img204/rightsy.jpg/1/w362.png (http://g.imageshack.us/img204/rightsy.jpg/1/)

I know this is the dreamweaver view and it doesn't come out looking like that, but that's how it's meant to look.

This is my code CSS



.searchTitle {
background: url(pictures/search.jpg) repeat-y;
color: #fff;
padding: 10px;
float: left;
width: 340px;
}

.search-left {
padding: 10px;
width:150px;
float: left;
}

.search-right {
padding: 10px;
width:150px;
float:left;
}


And this is my html



<div class="searchTitle"><strong>Buying Search</strong>
<div class="search-left">
<p><input type="checkbox" name="house" id="house" value="1"/> House</p>
<p><input type="checkbox" name="bungalow" id="bungalow" value="1"/> Bungalow</p>
<p><input type="checkbox" name="flat" id="flat" value="1"/> Flat</p>
</div>
<div class="search-right">
<p><input type="checkbox" name="detached" id="detached" value="1"/> Detached</p>
<p><input type="checkbox" name="semi-detached" id="semi-detached" value="1"/> Semi-Detached</p>
<p><input type="checkbox" name="Terrace" id="Terrace" value="1"/> Terrace</p>
</div>
</div>


You can look at the page at www.sampleestateagent.com/blank.php

djm0219
11-23-2009, 04:54 PM
.searchTitle {
background: url(pictures/search.jpg) repeat-y;
color: #fff;
}
.search-left {
padding: 10px;
width:150px;
float: left;
}
.search-right {
padding: 10px;
width:150px;
float: left;
}

You'll just need to correct your background.

j05hr
11-23-2009, 05:56 PM
I've taken away the padding and the float from that class, and the check boxes are aligned correctly but the title is in the middle of no where and the background doesn't go over the search-left or search-right divs.

If they are inside the other div shouldn't the background be there?

This is what it looks like

http://sampleestateagent.com/blank.php



<div class="searchTitle"><strong>Buying Search</strong>
<div class="search-left">
<p><input type="checkbox" name="house" id="house" value="1"/> House</p>
<p><input type="checkbox" name="bungalow" id="bungalow" value="1"/> Bungalow</p>
<p><input type="checkbox" name="flat" id="flat" value="1"/> Flat</p>
</div>
<div class="search-right">
<p><input type="checkbox" name="detached" id="detached" value="1"/> Detached</p>
<p><input type="checkbox" name="semi-detached" id="semi-detached" value="1"/> Semi-Detached</p>
<p><input type="checkbox" name="Terrace" id="Terrace" value="1"/> Terrace</p>
</div>
</div>




.searchTitle {
background: #3b2005 url(pictures/search1.jpg) repeat-x;
color: #fff;
}
.search-left {
padding: 10px;
width:150px;
float: left;
}
.search-right {
padding: 10px;
width:150px;
float: left;
}

Excavator
11-23-2009, 05:59 PM
Hello jo5hr,
You need to clear those floats.
Like this -

.searchTitle {
background: #3b2005 url(pictures/search1.jpg) repeat-x;
color: #fff;
overflow: auto;
}

Here is a site that explains how that works (http://www.quirksmode.org/css/clearing.html).

j05hr
11-23-2009, 06:07 PM
Thanks, that worked but the title is still going off in the middle of the page, how would I get that to be in the top left?

If it's the first thing in the div and there is no css or html to make it go where it is?

www.sampleestateagent.com/blank.php

Excavator
11-23-2009, 06:41 PM
Putting <strong> around your Buying Search text is inline styles. Instead, put some text tags around that heading, I've just randomly grabbed h4 here, and you can style the text easier.
Make your markup look like this -

<div id="content">
<div class="searchTitle"> <h4>Buying Search</h4>
<div class="search-left">
<p><input name="house" id="house" value="1" type="checkbox"> House</p>
<p><input name="bungalow" id=

And maybe style the h4 like this -


.searchTitle {
background: #3b2005 url(pictures/search1.jpg) repeat-x;
color: #fff;
overflow: auto;
}
.searchTitle h4 {
margin: 5px;
color: #fff;
}
.search-left {
padding: 10px;
width:150px;
float: left;
}
.search-right {
padding: 10px;
width:150px;
float: left;
}

Excavator
11-23-2009, 06:43 PM
By the way, good job on the valid code! :thumbsup:
One small error in your CSS -
h5 {font-style:2.1em;}

j05hr
11-23-2009, 06:59 PM
Thanks that worked, web design confuses me more and more each time...I was talking about using <b> tags and <strong> and my opinion was that you should use neither and do all your styling in CSS? And they told me <strong> is ok but not <b> So what's your opinion on using things like <strong>?

Thanks for the compliment, I spent ages designing it and recently spent ages doing the PHP so can't wait to finish it.

The page that you've seen is www.sampleestateagent.com/buying.php but I think it looks a bit plain and boring so trying to add a bit of style to it. That and the fact I made it in tables just to quickly give it a layout so I could test the PHP worked so now coding it with CSS.

One last thing that you seem like a good experienced person to ask. I have pages in the staff area that I know arn't valid HTML pages, but they're locked using the PHP so if you arn't logged in, it redirects you to login.php. I could take the confirm_logged_in function off so it doesn't redirect it, but if the page is done and looks ok, would you still say it's better to be valid code?

And now that I've thought about it, thinking of login.php, I know there is 1 error on this page that is wrong.

How would you write this to be valid? I know it's wrong but not sure how to define the id and the <h5> together if that's even possible?


<h5 id="link"/> <a href="index.php">Return to public site</a></h5>

Thanks for all the help and sorry for such a long post,
Josh

Excavator
11-23-2009, 07:05 PM
And they told me <strong> is ok but not <b> So what's your opinion on using things like <strong>?
Both are inline styling. I'm sure they have their place but why not use your CSS to style text instead?

Excavator
11-23-2009, 07:12 PM
How would you write this to be valid? I know it's wrong but not sure how to define the id and the <h5> together if that's even possible?


<h5 id="link"/> <a href="index.php">Return to public site</a></h5>



That is applying #link's styling to the h5 tag and then your closing it before the link or text with that slash - /> .
If you want to style the h5 with #link, make that look like this - <h5 id="link"> <a href="index.php">Return to public site</a></h5>

If you want to style the link with that id, put the id on the anchor like this - <h5><a href="index.php" id="link">Return to public site</a></h5>

j05hr
11-24-2009, 11:00 AM
How can I now make the price range go to underneath? Type of property? http://sampleestateagent.com/blank.php

Usually I'm fine with css but working inside a container is making it really confusing for me.





<div class="searchTitle"> <h4>Type of Property</h4>
<div class="search-left">
<p><input type="checkbox" name="house" id="house" value="1"/> House</p>
<p><input type="checkbox" name="bungalow" id="bungalow" value="1"/> Bungalow</p>
<p><input type="checkbox" name="flat" id="flat" value="1"/> Flat</p>
</div>
<div class="search-middle">
<p><input type="checkbox" name="detached" id="detached" value="1"/> Detached</p>
<p><input type="checkbox" name="semi-detached" id="semi-detached" value="1"/> Semi-Detached</p>
<p><input type="checkbox" name="Terrace" id="Terrace" value="1"/> Terrace</p>
</div>
<div class="search-right">
<select name="bedrooms" id="Bedrooms">
<option value="0"></option>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
<option value="5">5+</option>
</select>
Bedrooms
</div>
<div class="search-price">
<select name="pricelow" id="MinPrice">
<option value="1" >No Limit</option>
<option value="100000" >100,000</option>
<option value="120000">120,000</option>
<option value="150000">150,000</option>
<option value="250000">250,000</option>
<option value="300000">300,000</option>
<option value="400000">400,000</option>
<option value="500000">500,000</option>
<option value="1000000">1,000,000</option>
<option value="1500000">1,500,000</option>
<option value="2000000">2,000,000</option>
<option value="2000000">2,000,000+</option>
</select>
</div>
<div class="search-price">
&nbsp;to
<input type="hidden" name="RentalPeriod" value="0"/>
<select name="pricehigh" id="MaxPrice">
<option value="100000">100,000</option>
<option value="120000">120,000</option>
<option value="150000">150,000</option>
<option value="250000">250,000</option>
<option value="300000">300,000</option>
<option value="400000">400,000</option>
<option value="500000">500,000</option>
<option value="1000000">1,000,000</option>
<option value="1500000">1,500,000</option>
<option value="2000000">2,000,000</option>
<option value="10000000">No Limit</option>
</select>
</div>
</div>





.searchTitle {
background: #3b2005 url(pictures/search1.jpg) repeat-x;
color: #fff;
overflow: auto;
}
.searchTitle h4 {
margin: 5px;
color: #fff;
}
.search-left {
padding: 10px;
width:150px;
float: left;
}
.search-middle {
padding: 10px;
width:220px;
float: left;
overflow: auto;
}
.search-right {
padding: 30px;
width:125px;
float:left;
overflow:auto;
}

.search-price {
padding:10px;
float:left;
}

j05hr
11-24-2009, 03:42 PM
Solved it now, the page is all finished and validates with all the PHP in it too :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum