1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

3 divs with text in footer will not stay in same text-height

Discussion in 'CSS' started by byllan1337, Oct 2, 2014.

0
  1. #1
    Hey. I have try with float and line-height, but support and help + other will not be in the same height as information. Whats wrong?

    Picture: http://i.imgur.com/EWs9JyX.png[​IMG]

    Html

    <!DOCTYPE HTML>
<html>
    <head>
        <title>x.com - Free videos, pictures and socialnetwork.</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <meta charset="UTF-8">
        <meta name="description" content="Free porn videos and pictures">
        <meta name="keywords" content="porn, hot, girls, sexy, pictures, videos">
        <meta name="author" content="x">
    </head>
        <body>
        <div id = "head">
        <div id = "titletext"><a href="#">x</a></div>
    
        <div id = "search"><a href="#"><img src="pic/glas.png" style="width: 35px; height: 35px; float: right; line-height: 200%;" /></a><input type="text"></div>
    
        <div id = "meny">
                <a href="#">Home</a>
                <a href="#">Account</a>
                <a href="#">Videos</a>
                <a href="#">Pictures</a>
                <a href="#">Forum</a>
        </div>
        </div>
    
        <div id = "content">Welcome</div>
    
        <div id = "footer">
    
        <div id="f1">Information<br>
            <a href="#">News</a><br>
            <a href="#">About</a><br>
            <a href="#">Terms & Conditions</a><br>
            <a href="#">Privacy Policy</a><br>
            <a href="#">DMCA</a><br>
            <a href="#">2257</a><br>
            <a href="#">Become a partner</a>
        </div>
    
        <div id="f2">Support and help<br>
            <a href="#">Contact</a><br>
            <a href="#">Answered questions</a><br>
        </div>
    
        <div id="f3">Other<br>
            <a href="#">Chatroulette</a><br>
            <a href="#">Livecams</a><br />
        </div>
        </div>

        <div id="flast">© x.com <?php echo date("Y")?> <br/> All rigths reserved.</div>


        </body>
</html>
    Code (markup):
    Css

    body { margin: 0; padding: 0; }

#head{background-color: #0066CC; height: 40px; float: none;}
#titletext{color: white; font-size: 30px; font-family: Impact; margin-left: 15px; font-weight: bold; float: left;}
#meny{float: right; margin-right: 20px; word-spacing: 8px; font-size: 18px; line-height: 220%;}
#search{color: blue; float: right; line-height: 220%; margin-right: 5px;}
#content{color:black; font-family: Ebrima; font-size: 14px; height: 300px;}
#footer{background-color: #0066CC; min-height: 40px; width: 100%; color: white;}
#f1 {font-size: 18px; font-weight: bold; margin-left: 60px;}
#f2 {font-size: 18px; font-weight: bold; text-align: center;}
#f3 {font-size: 18px; font-weight: bold; text-align: right; margin-right: 60px;}
#flast {text-align: center;}

a:active{color: white; text-decoration: none; }
a:hover{color: white; text-decoration: none;}
a:link{color: white; text-decoration: none;}
a:visited{color: white; text-decoration: none;}
    Code (markup):
     
    byllan1337, Oct 2, 2014 IP
  2. Helge Sverre

    Helge Sverre Prominent Member Affiliate Manager

    Messages:
    840
    Likes Received:
    99
    Best Answers:
    2
    Trophy Points:
    305
    Digital Goods:
    2
    #2
    Whats happening here is that your footer link areas are rendered as block elements(divs), divs by default expand the entire width of whatever you place them inside, so each of the divs in the footer is expanding the whole width of the page, pushing the next one down to the next available space.

    What you want to do is to add these rules to #f1, #f2, #f3:
    float: left;
width: 25%;
    Code (markup):
    and this rule to #footer:
    overflow: auto;
    Code (markup):

    And for the love of good, format your HTML and CSS better.
     
    Helge Sverre, Oct 4, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    I'm just wondering why you have DIV for headings, DIV for what should probably be UL, and run-on sentences for your menu items. (since anchors are NOT semantic delimiters)...

    Much less the endless pointless ID for nothing in the CSS. You may want to investigate something called "semantic markup" and a CSS concept called "selectors".

    Likewise I'd probably not float all three items -- I'd float the first two and let the third fill the remaining space... and of course all those px metric font declarations are inaccessible crap.
     
    deathshadow, Oct 6, 2014 IP