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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    48
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Question 3 divs in one line, center align middle div

    Hi all,

    Trying to work on a website header.

    Basicly the first div has the logo, second div has the menu, and the third div has the social media buttons. I want them all on the same line with the logo on the left, the menu in the center, and the social media buttons on the right but cant seem to get the middle div to actually stay in the center, any ideas?

    Wanting it also so when the window is resized it stays in the same place rather than overlapping or moving under each other

    heres what i have

    Code:
    <div style="float: left; position: absolute; background: #000; width: 140px; height: 65px"></div>
    <div style="float: left; position: absolute; left: 25%; background: #444; width: 930px; height: 45px"></div>
    <div style="float: right; position: absolute; background: #000; width: 140px; height: 40px"></div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title Goes Here</title>
    <style type="text/css">
    body{
    	width: 900px;
    	border: 1px solid red;
    }
    #bo1{
    	float: left;
    	background: #444;
    	width: 80px;
    	height: 65px;
    	margin-top: -45px;
    }
    #bo2{
    	background: #444;
    	width: 600px;
    	height: 45px;
    	margin: 0 auto;
    }
    #bo3{
    
    	float: right;
    	background: #444;
    	width: 80px;
    	height: 40px;
    	margin-top: -45px;
    }
    #content{
    	clear:both;
    }
    </style>
    </head>
    
    <body>
    <div id="bo2">Menu</div>
    <div id="bo1">Logo here</div>
    <div id="bo3">Facebook</div>
    <div id="content">
    Put your writings and thoughts here.
    </div>
    </body>
    </html>
    Explanation:
    margin: 0 auto; will center the div bo2 in the body. That's why I gave body a width so we can see.
    bo1 and bo3 are generated after bo2 in the HTML so they normally would be under the bo2 div. With them floating left and right respectively. I gave both of them a negative margin-top style to move them up even with bo2. the -45px offsets the bo2 height.

    I added the content div to rep. your main HTML body, notice the clear:both; so it's not affected by the floats.

    This can be done other ways. This is what came to mind as I wrote.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    48
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title Goes Here</title>
    <style type="text/css">
    body{
    	width: 900px;
    	border: 1px solid red;
    }
    #bo1{
    	float: left;
    	background: #444;
    	width: 80px;
    	height: 65px;
    	margin-top: -45px;
    }
    #bo2{
    	background: #444;
    	width: 600px;
    	height: 45px;
    	margin: 0 auto;
    }
    #bo3{
    
    	float: right;
    	background: #444;
    	width: 80px;
    	height: 40px;
    	margin-top: -45px;
    }
    #content{
    	clear:both;
    }
    </style>
    </head>
    
    <body>
    <div id="bo2">Menu</div>
    <div id="bo1">Logo here</div>
    <div id="bo3">Facebook</div>
    <div id="content">
    Put your writings and thoughts here.
    </div>
    </body>
    </html>
    Explanation:
    margin: 0 auto; will center the div bo2 in the body. That's why I gave body a width so we can see.
    bo1 and bo3 are generated after bo2 in the HTML so they normally would be under the bo2 div. With them floating left and right respectively. I gave both of them a negative margin-top style to move them up even with bo2. the -45px offsets the bo2 height.

    I added the content div to rep. your main HTML body, notice the clear:both; so it's not affected by the floats.

    This can be done other ways. This is what came to mind as I wrote.

    Hi, thanks for the reply, seems to be ok but when i resize the window the items overlap each other. Is there a way to stop them overlapping and just make them stay in the same position no matter what the window size is?

    Here is my code:


    HTML
    Code:
    <div id="header">
    		<div class="menubar">
    				<ul>
    				<li><a href="">HOME</a></li>
    				<li><a href="">SPORTS</a>
    					<ul class="submenu-sports">
    					<div class="content">
    						Content will go here.
    					</div>
    					</ul>
    				</li>
    				<li><a href="">OFF FIELD GEAR</a></li>
    				<li><a href="">GALLERY</a></li>
    				<li><a href="">KIT DESIGNERS</a></li>
    				<li><a href="">CLUB SHOPS</a></li>
    				<li><a href="">INFORMATION</a></li>
    				<li><a href="">OFFERS</a></li>
    				<li><a href="">CONTACT</a></li>
    				</ul>
    			</div>
    		<div class="logo">
    		<a href=""><img src="images/logo.png" alt="AiroSportswear" /></a>
    		</div>
    		
    		<div class="social-media">
    		<a href=""><img src="images/fb_icon.png" alt="Like us on facebook" /></a> <a href=""><img src="images/tw_icon.png" alt="Follow us on twitter" /></a> <a href=""><img src="images/gp_icon.png" alt="Follow us on Google Plus" /></a> <a href=""><img src="images/yt_icon.png" alt="Watch us on youtube"></a>
    		</div>
    		<div class="clear"></div>
    	
    </div>
    CSS
    Code:
    .menubar {
    	margin: 30px auto 0 auto;
    	height: 45px;
    	width: 930px;
    	font-family: 'Merriweather Sans', sans-serif;
    }
    
    .menubar ul li {
    	display: inline-block;
    	margin-left: 22px;
    	positon: fixed;
    }
    
    .menubar ul li:hover {
    	background: url('../images/menubarhoverarrow.jpg') center no-repeat;
    }
    
    
    .menubar ul li a {
    	text-decoration: none;
    	display: inline-block;
    	font-size: 14px;
    	color: #111;
    	font-weight: 500;
    	height: 20px;
    }
    
    .menubar ul li ul.submenu-sports {
    	display: none;
    	position: fixed;
    	top: 52px;
    	background: #555;
    	min-height: 75px;
    	width: 500px;
    	border: 2px solid #00baff;
    	padding: 10px;
    	background: url('../images/submenubg.jpg') repeat #2c2c2c;
    	color: #ececec;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	-webkit-box-shadow: 0px 5px 10px 0px rgba(000, 000, 000, 0.5);
    	box-shadow: 0px 5px 10px 0px rgba(000, 000, 000, 0.5);
    }
    
    .menubar ul li ul.submenu-sports li {
    	display: inline-block;
    }
    
    .menubar ul li:hover ul.submenu-sports {
    	display: block;
    }
    
    #header {
    	position: fixed;
    	top: 0px;
    	z-index: 99999;
    	width: 100%;
    	background: #fff;
    	height: 78px;
    	background: url('../images/headerborder.png') repeat-x;
    }
    
    #header-wrapper {
    	padding: 10px, 10px, 0px, 10px;
    	width: 970px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #header .logo {
    	float: left;
    	margin-top: -70px;
    }
    
    #header .social-media {
    	float: right;
    	margin-top: -55px;
    }
    Last edited by tim967; 10-24-2013 at 09:02 AM. Reason: adding my code

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    but when i resize the window the items overlap each other.
    Oh Yeah, you did ask for that, didn't you. Use percents for the widths and remove the one for body or make that one a percent of the total window.

    Notice what happens inside the divs. Read up on responsive design. and check out http://cardinalcss.com/ and my favorite http://getbootstrap.com/2.3.2/.

    Code:
    <style type="text/css">
    body{
    	width: 90%;
    	margin: 0 auto;
    	border: 1px solid red;
    }
    #bo1{
    	float: left;
    	background: #444;
    	width: 10%;
    	height: 65px;
    	margin-top: -45px;
    }
    #bo2{
    	background: #444;
    	width: 65%;
    	height: 45px;
    	margin: 0 auto;
    }
    #bo3{
    
    	float: right;
    	background: #444;
    	width: 10%;
    	height: 40px;
    	margin-top: -45px;
    }
    #content{
    	clear:both;
    }
    </style>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Look into responsive web design:

    Introduction to Responsive Web Design: http://www.linkedin.com/news?actionB...3Z-fJK7fpockY1
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/
    Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/

    Mobile Website:

    Learn the Mobile Web: http://learnthemobileweb.com/2009/07/mobile-meta-tags/
    10 Ways the Mobile Web is Different: http://www.elated.com/articles/10-wa...-is-different/
    Redesigning a Site For Mobile: What's Involved?: http://www.elated.com/articles/redes...hats-involved/
    How to Validate and Test for the Mobile Web: http://designfestival.com/how-to-val...&utm_term=More

    W3C mobileOK Checker: http://validator.w3.org/mobile/
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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