Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6

Thread: Help with Divs.

  1. #1
    Junior Member
    Join Date
    Oct 2013
    Location
    United Kingdom
    Posts
    5
    Member #
    37343

    Help with Divs.

    Ok, so basically I'm having trouble with something, below is my code.

    HTML Code:
    <head>
    <style>
    #billets ul {list-style-type: none; float: left;}
    #spacer {}
    #profiles {float: right;}
    </style>
    </head>
    
    
    <body>
    <div id=billets ul>
    <ul>
    <li style="font-weight: bold; font-size: 12px;"> A Company 
    <li><a href="#">Major H. Mackay</a> - Officer Commanding</li>
    <li><a href="#">Captain R. Belotti</a> - Company 2 IC</li>
    </li>
    </br>
       <ul>
       <li style="font-weight: bold; font-size: 12px;"> 1 Platoon
       <li><a href="#">Lieutenant Cramb</a> - Officer Commanding</li>
       <li><a href="#">Sergeant Andrews</a> - Platoon 2 IC</li>
       <li><a href="#">Lance Corporal Koch</a> - Platoon Signaller</li>
       </li>
    	</br>	
    		<ul>
    		<li style="font-weight: bold; font-size: 12px;"> 1 Section
    		<li><a href="#"> Corporal R. Thomas</a> - Section Leader </li>
    		<li><a href="#"> Lance Corporal Knotty</a> - Section 2 IC </li>
    		<li><a href="#"> Lance Corporal Blessed</a> </li>
    		<li><a href="#"> Lance Corporal Walker</a> </li>
    		<li><a href="#"> Private Nayar </a> </li>
    		<li><a href="#"> Private Van Elburg </a> </li>
    		</li>
    		</br>
    
    		<li style="font-weight: bold; font-size: 12px;"> 2 Section 
    		<li><a href="#"> Corporal McMicheal </a> - Section Leader</li>
    		<li><a href="#"> Corporal Pienaar </a> - Section 2 IC</li>
    		<li><a href="#"> Sergeant Mitchell </a></li>
    		<li><a href="#"> Private R. Palmer </a></li>
    		<li><a href="#"> Private Jakubowicz </a></li>
    		<li><a href="#"> Private Hamilton </a></li>
    		</li>
    		</br>
    		
    		<li style="font-weight: bold; font-size:12px;"> 3 Section </li>
    		</ul>
    		</br>
    	<li style="font-weight: bold; font-size: 12px;"> 2 Platoon</li>
    	</br>	
    			<ul>
    			<li style="font-weight: bold; font-size: 12px;"> 1 Section</li>
    			</br>
    			<li style="font-weight: bold; font-size: 12px;"> 2 Section </li> 
    			</br>
    			<li style="font-weight: bold; font-size:12px;"> 3 Section </li>
    			</ul>
    	</br>
    	<li style="font-weight: bold; font-size: 12px;"> 3 Platoon</li>
    	</br>	
    			<ul>
    			<li style="font-weight: bold; font-size: 12px;"> 1 Section</li>
    			</br>
    			<li style="font-weight: bold; font-size: 12px;"> 2 Section </li> 
    			</br>
    			<li style="font-weight: bold; font-size:12px;"> 3 Section </li>
    			</ul>
    			</ul>
    			</br>
    
    	
    
    		<li style="font-weight: bold; font-size: 12px;"> Fire Support Team
    			<li><a href="#"> Captain Beardmore </a> - Officer Commanding</li>
    			</li>
    		</br>
    			<ul>
    			<li style="font-weight: bold; font-size:12px;"> Engineers Detachment
    				<li><a href="#"> Captain Beardmore </a> - Detachment Commander</li>
    				<li><a href="#"> Private R. Hirst </a></li>
    				<li><a href="#"> Private Major </a></li>
    			</li>
    			</br>
    
    			<li style="font-weight: bold; font-size:12px;"> Medical Detachment 
    			</li>
    			</br>
    		
    			<li style="font-weight: bold; font-size:12px;"> Artillery Detachment
    			</li>
    			</br>
    			</ul>
    		<li style="font-weight:bold;font-size:12px;"> Aviation Wing
    			<li><a href="#"> Private Waller </a> - Aviation Wing Commander</li>
    			<li><a href="#"> Private Elder </a> - Aviation Wing 2 IC</li>
    		</li>
    		</br>
    			<ul>
    			<li style="font-weight:bold; font-size:12px;">Warlock Squadron
    			</li>
    			</br>
    			<li style="font-weight:bold; font-size:12px;">Witchcraft Squadron
    			</li>
    			</br>
    			<li style="font-weight:bold; font-size:12px;">Black Cat Squadron
    			</li>
    			</br>
    			<li style="font-weight: bold; font-size:12px;">Grimoire Squadron
    			</li>
    			</ul>
    		</br>
    		<ul>
    			<li style="font-weight: bold; font-size: 12px;"> Recruits
    				<li><a href="#">Recruit Lynge </a></li>
    				<li><a href="#">Recruit A More </a></li>
    				<li><a href="#">Recruit Westmorland </a></li>
    			</li>
    		</br>
    			<li style="font-weight: bold; font-size: 12px;"> Reserves
    				<li><a href="#">Corporal Thompson </a></li>
    				<li><a href="#">Corporal Sands</a></li>
    				<li><a href="#">Private Taylor</a></li>
    				<li><a href="#">Private Randt </a></li>
    			</li>
    			</br>
    		</ul>
    
    </ul>
    <div id="profiles">
    Testing
    </div>
    </body>
    I know its not the best laid out, or nor is it the correct way I am basically making a webpage for a forum portal. Now my problem is, If I take out the "float" attributes from the css it works as it should, that being the list indented and ending all the way at the bottom on the left hand side of the screen, now what I need is another div to the right, where I can imput details to each name once clicked, when I float the billets to the left, and the profiles to the right, I get the desired affect but I also get Recruits and Reserves list floated right next to the div on the left. Hard to explain, but if you try it yourself, just take out the floats from the CSS, thats how it should be, then put them back in and thats how it is.

    any help is appreciated.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I don't get it...do you want each list to be beside one another or below one another?

    Either way, one thing you'll want to keep in mind is TheGAME1264's Immutable Law of Floats: When you float, you must clear. Floats are designed to push content to the left or right of a container while allowing other content to wrap around it, and as such aren't automatically cleared. You have to clear them once you're done using them.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Oct 2013
    Location
    United Kingdom
    Posts
    5
    Member #
    37343
    Quote Originally Posted by TheGAME1264 View Post
    I don't get it...do you want each list to be beside one another or below one another?

    Either way, one thing you'll want to keep in mind is TheGAME1264's Immutable Law of Floats: When you float, you must clear. Floats are designed to push content to the left or right of a container while allowing other content to wrap around it, and as such aren't automatically cleared. You have to clear them once you're done using them.
    Below. Here is an example 16AA Forums - ORBAT

    as you can see the lists down the left hand side of the page, and I want another div to the right to put the profile fields. But when I use the floats, the bottom two lists go next to each other like this..

    when they should carry on down the page.. Also how do i clear a float, im not that experienced when it comes to HTML.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Ahh okay.

    Right after the div you want to float to the right, add this in:
    Code:
    <div style="clear:  both;"></div>
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Oct 2013
    Location
    United Kingdom
    Posts
    5
    Member #
    37343
    Ok thanks, i managed to get that working but now im having other issues.. so basically what im trying to achieve is a layout like this;



    Black = Wrapper Div
    Red = LeftContainer Div
    Yellow = RedContainer Div
    Green = List Div
    Light Blue = Info Div
    Dark Blue = Image Div
    Purple = Qualification Div
    Pink = Awards/Medals Div
    Orange = Service History Div

    Here is my code so far;

    HTML Code:
    <head>
    <style>
    #clear {clear:both;}
    #wrapper {width: 100%;}
    #leftcontainer {float: left;}
    #rightcontainer {background: blue;}
    #billets ul {list-style-type: none;}
    #profiles {float: right;}
    #image {padding-right: 10px;}
    #info {float: left;}
    </style>
    </head>
    
    
    <body>
    <div id=wrapper>
    	<div id=leftcontainer>
    		<div id=billets ul>
    			<ul>
    				<li style="font-weight: bold; font-size: 12px;"> A Company 
    					<li><a href="#">Major H. Mackay</a> - Officer Commanding</li>
    					<li><a href="#">Captain R. Belotti</a> - Company 2 IC</li>
    				</li>
    </br>
    			<ul>
    				<li style="font-weight: bold; font-size: 12px;"> 1 Platoon
    					<li><a href="#">Lieutenant Cramb</a> - Officer Commanding</li>
    					<li><a href="#">Sergeant Andrews</a> - Platoon 2 IC</li>
    					<li><a href="#">Lance Corporal Koch</a> - Platoon Signaller</li>
    				</li>
    </br>	
    			<ul>
    				<li style="font-weight: bold; font-size: 12px;"> 1 Section
    					<li><a href="#"> Corporal R. Thomas</a> - Section Leader </li>
    					<li><a href="#"> Lance Corporal Knotty</a> - Section 2 IC </li>
    					<li><a href="#"> Lance Corporal Blessed</a> </li>
    					<li><a href="#"> Lance Corporal Walker</a> </li>
    					<li><a href="#"> Private Nayar </a> </li>
    					<li><a href="#"> Private Van Elburg </a> </li>
    				</li>
    </br>
    
    				<li style="font-weight: bold; font-size: 12px;"> 2 Section 
    					<li><a href="#"> Corporal McMicheal </a> - Section Leader</li>
    					<li><a href="#"> Corporal Pienaar </a> - Section 2 IC</li>
    					<li><a href="#"> Sergeant Mitchell </a></li>
    					<li><a href="#"> Private R. Palmer </a></li>
    					<li><a href="#"> Private Jakubowicz </a></li>
    					<li><a href="#"> Private Hamilton </a></li>
    				</li>
    </br>
    		
    				<li style="font-weight: bold; font-size:12px;"> 3 Section </li>
    			</ul>
    </br>
    				<li style="font-weight: bold; font-size: 12px;"> 2 Platoon</li>
    </br>	
    			<ul>
    				<li style="font-weight: bold; font-size: 12px;"> 1 Section</li>
    </br>
    				<li style="font-weight: bold; font-size: 12px;"> 2 Section </li> 
    </br>
    				<li style="font-weight: bold; font-size:12px;"> 3 Section </li>
    			</ul>
    </br>
    				<li style="font-weight: bold; font-size: 12px;"> 3 Platoon</li>
    </br>	
    			<ul>
    				<li style="font-weight: bold; font-size: 12px;"> 1 Section</li>
    </br>
    				<li style="font-weight: bold; font-size: 12px;"> 2 Section </li> 
    </br>
    				<li style="font-weight: bold; font-size:12px;"> 3 Section </li>
    			</ul>
    			</ul>
    </br>
    				<li style="font-weight: bold; font-size: 12px;"> Fire Support Team
    					<li><a href="#"> Captain Beardmore </a> - Officer Commanding</li>
    				</li>
    </br>
    			<ul>
    				<li style="font-weight: bold; font-size:12px;"> Engineers Detachment
    					<li><a href="#"> Captain Beardmore </a> - Detachment Commander</li>
    					<li><a href="#"> Private R. Hirst </a></li>
    					<li><a href="#"> Private Major </a></li>
    				</li>
    </br>
    
    				<li style="font-weight: bold; font-size:12px;"> Medical Detachment 
    				</li>
    </br>
    		
    				<li style="font-weight: bold; font-size:12px;"> Artillery Detachment
    				</li>
    </br>
    			</ul>
    				<li style="font-weight:bold;font-size:12px;"> Aviation Wing
    					<li><a href="#"> Private Waller </a> - Aviation Wing Commander</li>
    					<li><a href="#"> Private Elder </a> - Aviation Wing 2 IC</li>
    				</li>
    </br>
    			<ul>
    				<li style="font-weight:bold; font-size:12px;">Warlock Squadron
    				</li>
    </br>
    				<li style="font-weight:bold; font-size:12px;">Witchcraft Squadron
    				</li>
    </br>
    				<li style="font-weight:bold; font-size:12px;">Black Cat Squadron
    				</li>
    </br>
    				<li style="font-weight: bold; font-size:12px;">Grimoire Squadron
    				</li>
    			</ul>
    			</ul>
    			<ul>
    				<li style="font-weight: bold; font-size: 12px;"> Recruits
    					<li><a href="#">Recruit Lynge </a></li>
    					<li><a href="#">Recruit A More </a></li>
    					<li><a href="#">Recruit Westmorland </a></li>
    				</li>
    </br>
    				<li style="font-weight: bold; font-size: 12px;"> Reserves
    					<li><a href="#">Corporal Thompson </a></li>
    					<li><a href="#">Corporal Sands</a></li>
    					<li><a href="#">Private Taylor</a></li>
    					<li><a href="#">Private Randt </a></li>
    				</li>
    </br>
    			</ul>
    			</ul>
    	</div>
    </div>
    
    
    
    
    <div id=rightcontainer>
    	<div id=profiles>
            <div id=info>
    			<h1> Major H. Mackay </h1>
            </div>
    		<div id=image>
    			<img src="http://i275.photobucket.com/albums/jj288/worrioz/PortraitPicture.png" alt="Soldier" height="250" width="180";> 
    		</div>
    	</div>
    </div>
    <div style="clear:  both;"></div>
    </div>
    </body>
    Thanks.

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Okay...I see what you want, but if you uploaded it so we can see what you have and point to a URL at this point, it'd be a whole lot better.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com