Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: floating divs

  1. #1
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts

    floating divs

    I'm trying to get some checkboxes to float next to each other in line.

    And I get this,




    I want it to look like this,



    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

    Code:
    .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

    Code:
    	<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

  • #2
    Senior Coder djm0219's Avatar
    Join Date
    Aug 2003
    Location
    Wake Forest, North Carolina
    Posts
    1,300
    Thanks
    4
    Thanked 203 Times in 200 Posts
    Code:
    .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.
    Dave .... HostMonster for all of your hosting needs

  • #3
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    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

    Code:
    	<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>
    Code:
    .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;
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jo5hr,
    You need to clear those floats.
    Like this -
    Code:
    .searchTitle {
    	background: #3b2005 url(pictures/search1.jpg) repeat-x;
    	color: #fff;
    overflow: auto;
    }
    Here is a site that explains how that works.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <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 -
    Code:
    .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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    By the way, good job on the valid code!
    One small error in your CSS -
    h5 {font-style:2.1em;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    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?

    Code:
    <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

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by j05hr View Post

    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?

    Code:
    <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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    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.



    Code:
    	<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>

    Code:
    .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;
    }

  • #12
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    Solved it now, the page is all finished and validates with all the PHP in it too


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •