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 to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning elements using CSS

    Hey all,
    This is my first post here so I hope you'll forgive me if I break some rules.
    I've been looking for tips on using CSS to align elements for my new website. I am pretty new at this structure but familiar with syntax.

    I am trying to get a nice header together for my website. It contains two elements; a logo and a title, which should join nicely.
    My logo is 100px high so that's what I want my header to be. I set all the margins and padding to zero and made a bottom border. Inside the header div I made two divs. One containing the logo and the other containing my title text.
    I want them centered. The header div should be centered so the complete combination hangs neatly in the center. But now I got the logo div floating left and the text div floating right, so they're as far apart as my screen allows them to be.... How do I get them neatly next to eachother in the center?
    I have a working solution with tables, but ran into another problem of the content div overflowing into my header div somehow. Making my menu renderend above the bottom border of the header div. (the border was a <hr> back then, now it's a border-bottom) And someone also told me tables was bad practice.

    I hope someone can help me without me having to give out my code because I am working on some sensitive stuff.

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    float property should work dont forget the clear fix
    I just wrote a tutorial about this
    http://templafied.com/2010/12/12/css...usefloatincss/

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Gullydwarf,
    Without code to look at, all we can do is guess. You could provide code you are working with but no content.
    It sounds like your header has no width. If it is to contain your left and right header elements and be centered, it will need a width.
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Have a try with this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    	font: 100% Tahoma, Geneva, sans-serif;
    	color: #333;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    h1 {
    	margin: 0;
    	line-height: 100px;
    	border-bottom: 2px solid #f00;
    }
    #logo {
    	height: 100px;
    	width: 300px;
    	margin: 0 25px 0 0;
    	float: left;
    	display: block;    /*for demo only*/
    	background: #0f0;   /*for demo only*/
    }
    	
    </style>
    </head>
    <body>
        <div id="container">
        	<h1 id="header">
            	<img src="path/to/image.jpg" alt="logo" id="logo" />
                Title of This Site
            </h1>
        <!--end container--></div>
    </body>
    </html>
    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
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello thank you for the tips and sorry for my late reply.
    Here is some code from me:
    the HTML
    Code:
    		<!-- Header -->
    		<div class="header">
    			<div id="logo">
    				<img src="./img/logo.gif" alt="" class="header">
    			</div>
    			<div id="titel">
    				My Title
    			</div>
    <!--		<table class="header">
    			<tr>
    				<td>
    					<img src="./img/logo.gif" alt="" class="header">
    				</td>
    				<td>
    					My Title
    				</td>
    			</tr>
    		</table> -->
    		</div>
    		<!-- Eind header -->
    my CSS:
    Code:
    /* Get rid of standard margin/padding */
    * {	margin: 0;
    	padding: 0; }
    
    body {	/*width: 1024px;*/
    		height: 100%;
    		/* Center de body van de pagina */
    		margin-left: auto;
    		margin-right: auto; }
    
    hr {	color: #000099;
    	background-color: #000099;
    	height: 3px; 
    	margin: 0; }
    
    .header {	color: #000099;
    			text-align: center;
    			height: 100px;
    			font-size: 60px;
    			font-family: Arial;
    			/* Center de header elementen */
    			margin-left: auto;
    			margin-right: auto;
    			margin-top: 0;
    			margin-bottom: 0;
    			border-bottom: 3px solid #009;
    			position: relative; }
    			
    #logo {	float: left; }
    #titel {	float: right; }
    This CSS is a version from after I was trying lots of different things for a while so it is actually quite crappy...

    but the code from excavator seems to work fine. So I think I am going use that. Thanks for that!


  •  

    Posting Permissions

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