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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Div positioning problem

    Ok I have a footer at the bottom of my site (a div with id of 'footer'), inside of which I have three divs, each set to inline block, then the footer is set to 'text-align: centre', so they are all centered, and all is good and well until I add items to any of them... when I add items to one the other two change position, take a look - http://www.sendspace.com/filegroup/S...m4OYjeIAiepVxg

    Code:
    <footer id="footer">
                <div>
                    <h2>Links</h2>
                    <a href = "index.html">Home</a><br/>
                    <a href = "About.html">About</a><br/>
                    <a href = "Services.html">Services</a><br/>
                    <a href = "Experience.html">Experience</a><br/>
                    <a href = "Contact.html">Contact</a><br/>
                    <a href = "Sitemap.html">Sitemap</a><br/>
                </div>
                <div id = "middiv">
                    <h2>Stuff</h2>
                </div>
                <div>
                    <h2>Contact</h2>
    
                </div>
    </footer>
    Code:
    #footer{
    	font-family: OpenSans;
    	border-top: 1px solid #273F56;
    	width: 100%;
    	height: 220px;
    	background: #383838;
    	background: url(../debut_dark/debut_dark/debut_dark2.png);
    	background-repeat: repeat;
    	text-align: center;
    }
    #footer div{
    	display: inline-block;
    	margin-top: 30px;
    	width: 270px;
    	text-align: left;
    	color: #ccc;
    	font-style: normal;
    }
    #footer #middiv{
    	margin-left: 40px;
    	margin-right: 40px;	
    }
    #footer h2{
    	border-bottom: 1px dotted grey;
    	margin-bottom: 10px;
    	font-weight: normal;
    	font-size: 30px;
    	color: #868686;
    }
    #footer a{
    	text-decoration: none;
    	color: inherit;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello harvs899,
    You might have more control over those elements if you floated them like this example

    That would take an extra containing element that you would need to center though. Your method will work too, just not inline-block. Try it this way -
    Code:
    #footer div {
        color: #CCCCCC;
        display: inline-table;
        font-style: normal;
        margin-top: 30px;
        text-align: left;
        width: 270px;
    }
    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

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you very much, that worked a treat!


  •  

    Tags for this Thread

    Posting Permissions

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