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 2 of 2

Thread: Floating <div>

  1. #1
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts

    Floating <div>

    Hey guys, I've always had some trouble with floating <div>. I put the entire script in so you could see the entire page. Look for the bolded underlines in sccript.

    Code:
    <html>
    	<head>
    		<title>vGame | Video Game Reviews</title>
    		<link rel="stylesheet" type="text/css" href="global.css"/>
    	</head>
    	<body>
    		<div id="beta2">
    			<a href="#">Beta 2.0 Release Date: 9/4/11</a>		
    		</div>
    		<div id="header">
    			<div id="logo">
    				<h1>vCurrent</h1>
    			</div>
    			<div id="user_panel">
    				<div id="search">
    					<input type="text" name="search" maxlength="40"/>				
    				</div>
    				<div id="login">
    					<input type="text" name="username" maxlength="24"/>
    					<input type="text" name="password" maxlength="24"/>
    				</div>
    			</div>
    		</div>
    	
    		<div id="content">	
    			<div id="tabs">
    				<ul>
    					<li><a href="#">A</a></li>
    					<li><a href="#">B</a></li>
    					<li><a href="#">C</a></li>
    					<li><a href="#">D</a></li>
    					<li><a href="#">E</a></li>
    				</ul>		
    			</div>
    			<div id="row2">
    				<div id="flash">
    					<textarea rows="20" cols="60">flash content here</textarea>
    				</div>
    				<div id="most_followed">  <!-- float next to id="flash" -->
    					<ol>
    						<li>SCII</li>
    						<li>Black Ops</li>
    						<li>Metroid</li>
    						<li>Sims 4</li>
    						<li>Boxhead Bounty Hunter</li>
    					</ol>			
    				</div>
    			</div>
    		</div>	
    		<div id="footer">
    			<ul>
    				<li><a href="#">About Us</a></li>
    				<li><a href="#">Licenses</a></li>
    				<li><a href="#">User Agreement</a></li>
    				<li><a href="#">FAQ</a></li>
    				<li><a href="#">Contact Us</a></li>
    			</ul>		
    		</div>
    	</body>
    </html>
    Code:
    /* margin, padding, border, background, font (family, type, align), float */
    
    /* ---------------------------
    
    			Global
    			
    --------------------------- */
    
    body, h1, p, input {
    	margin: 0px;
    	padding: 0px;
    
    }
    
    /* ---------------------------
    
    			Header
    			
    --------------------------- */
    
    /* Beta 2.0 */
    #beta2 {
    	padding: 2px 30px 2px 0px;
    	border: solid;
    	border-width: 0px 0px 1px 0px;
    	background-color: grey;
    	text-align: right;	
    	display: block;
    }
    
    #beta2 a {
    	text-decoration: none;
    	color: #000000;
    }
    
    #beta2 a:hover {
    	text-decoration: underline;
    }
    
    /* Header */
    #header {	
    	margin: 0 auto;
    	border: solid;
    	border-width: 0px 0px 1px 0px;
    	background-color: yellow;
    	font-family: Arial, sans-serif;
    	overflow: hidden;
    }
    
    #logo {
    	padding: 30px 0px 30px 60px;
    	font-size: 24px;
    	float: left;
    }
    
    #user_panel {
    	float: left;
    	position: relative;
    	top: 60px;
    	left: 350px;	
    }
    	
    #search {
    	float: left;
    	border-right: solid;
    	padding-right: 10px;
    }
    
    #search input {
    	width: 300px;
    }
    
    #login {
    	padding-left: 10px;
    	float: left;	
    }
    
    #login input {
    	width: 100px;
    }
    
    /* ---------------------------
    
    			Content
    			
    --------------------------- */
    
    #content {
    	margin: 0px 200px 0px 200px;
    	border: solid;
    	border-width: 0px 1px 0px 1px;
    	background-color: green;
    }
    
    #tabs ul {
    	list-style: none;
    	margin: 0px;
    	padding: 0px 0px 30px 0px;
    	text-align: center;
    }
    
    #tabs li {
    	display: inline;
    	padding: 0em 4.2em 1em 4.2em;
    	border: solid;
    	border-width: 0px 1px 1px 1px;
    	background-color: grey;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    #tabs li a {
    	color: #FFFFFF;
    	text-decoration: none;
    
    }
    
    #tabs li a:hover {
    	text-decoration: underline;
    }
    
    #flash {              /* need float */
    }
    
    #most_followed {                   /* need to be to the "right" of flash */
    	font-family: Verdana, sans-serif;
    }
    
    
    /* ---------------------------
    
    			Footer
    			
    --------------------------- */
    
    #footer {
    	border: solid;
    	border-width: 1px 0px 0px 0px;
    	font-family: Arial, sans-serif;
    	display: block;
    }
    
    #footer ul {
    	list-style: none;
    	margin: 0px;
    	padding: 4px 0px 4px 0px;
    	background-color: grey;
    	text-align: center;	
    }
    
    #footer li {
    	display: inline;
    }
    Last edited by Aurora.Light; 04-10-2011 at 11:00 PM.

  • #2
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    nvm fixed it meself


  •  

    Posting Permissions

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