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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    153
    Thanks
    53
    Thanked 0 Times in 0 Posts

    css vertical align

    Hello. How do I get the col2,col3, and col4 content to vertically align in the middle of the div?

    Code:
    #colmain{width: 750px; margin: 0 auto;min-height: 50px;border-top: 1px #000000 solid;}
    #colwrap{float: left;width: 100%;}
    #col2{margin: 0 450px 0 40px; padding-left: 5px;background: #0000ff;  vertical-align: middle;}
    #col1{float: left;width: 40px; margin-left: -750px;background: #00ff00; }
    #col3{float: left;width: 195px; padding-left: 5px; margin-left: -200px;background: #ffff00; vertical-align: middle;}
    #col4{float: left;width: 245px; padding-left: 5px; margin-left: -450px;background: #ff0000; vertical-align: middle;}
    Code:
    <div id="colmain">
    <div id="colwrap"><div id="col2"><b>Name</b></a>
    		</div></div>
    		<div id="col1"><img src="avatar.gif" width="40px" height="40px"/></div>
    		<div id="col3">Date</div>
    		<div id="col4">Link</div></div>
    Last edited by wincode; 09-01-2010 at 03:30 AM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    We really need your whole code. But in the meantime, look at this site. Much help here.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Jan 2010
    Posts
    153
    Thanks
    53
    Thanked 0 Times in 0 Posts
    Hey sorry, here it is:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="/style.css" type="text/css">
    <title>Member list</title>
    <style type="text/css">
    
    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    background-color: #f1f1f1;
    font-size: 14px;
    }
    
    b{font-size: 110%;}
    em{color: red;}
    
    #maincontainer{
    width: 1000px;
    margin: 0 auto;
    
    }
    
    #topsection{
    height:142px;
    }
    
    
    
    #menus{
    height: 42px;
    max-width:1000px;
    margin: 0 auto;
    border-bottom: 1px solid #ddd;
    background-image: url('/templates/menus3.gif');
    font-size: 16px;
    }
    
    #topsectioninside{
    width:1000px;
    margin: 0 auto;
    border-bottom: 1px solid #ddd;
    }
    
    #topsection h1{
    margin: 0;
    padding-top: 15px;
    }
    
    #contentwrapper{
    float: left;
    width: 100%;
    
    }
    
    #contentcolumn{
    margin-left: 210px;
    min-width: 750px;
    }
    
    #leftcolumn{
    float: left;
    width: 210px;
    margin-left: -100%;
    }
    
    #profilewrap{
    float: left;
    width: 100%;
    
    }
    
    #profilenamewrap{
    padding-left: 5px;
    margin-left: 70px;
    min-width: 130px;
    min-height: 80px;
    }
    
    #profilepicwrap{
    float: left;
    width: 70px;
    margin-left: -100%;
    min-height: 80px;
    }
    
    #profilemain{
    width: 200px;
    margin: 0 auto;}
    
    #commentwrap{
    float: left;
    width: 100%;
    
    }
    
    #commentnamewrap{
    padding-left: 5px;
    margin-left: 70px;
    min-width: 200px;
    min-height: 80px;
    }
    
    #commentpicwrap{
    float: left;
    width: 70px;
    margin-left: -100%;
    }
    
    #commentmain{
    width: 400px;
    margin: 0 auto;
    }
    
    
    
    #colmain{width: 750px; margin: 0 auto;min-height: 50px;border-top: 1px #000000 solid;}
    #colwrap{float: left;width: 100%;}
    #col2{margin: 0 450px 0 40px; padding-left: 5px;background: #0000ff;  vertical-align: middle;}
    #col1{float: left;width: 40px; margin-left: -750px;background: #00ff00;}
    #col3{float: left;width: 195px; padding-left: 5px; margin-left: -200px;background: #ffff00; vertical-align: middle;}
    #col4{float: left;width: 245px; padding-left: 5px; margin-left: -450px;background: #ff0000; vertical-align: middle;}
    
    
    #colmaintitle{width: 750px; margin: 0 auto;max-height: 30px;}
    #colwraptitle{float: left;width: 100%;}
    #col2title{margin: 0 450px 0 40px; padding-left: 5px;background: #0000ff;}
    #col1title{float: left;width: 40px; margin-left: -750px;background: #00ff00;}
    #col3title{float: left;width: 195px; padding-left: 5px;margin-left: -200px;background: #ffff00;}
    #col4title{float: left;width: 245px; padding-left: 5px; margin-left: -450px;background: #ff0000;}
    
    
    
    
    
    
    #footer{
    clear: left;
    width: 1000px;
    background: #eee;
    border-top:1px solid #ddd;
    height:42px;
    margin: 0 auto;
    text-align: center;
    
    }
    
    
    .innertube{
    margin: 10px;
    margin-top: 5px;}
    
    
    
    
    </style>
    
    
    
    </head>
    <body>
    
    <div id="topsection"><div id="topsectioninside">
    <div id="header">
    
    <div id="logo"><a href="index.php"><img src="/templates/logo.png"/></a></div>
    <div id="search_header">
    <strong><a href="/task/login.htm">Log-in</a> | <a href="/task/register.htm">Register</a></strong>	
    </div>
    <div id="down"></div></div>
    
    <div id="menus">
    <center><a href="index.php">Home</a> | <a href="/task/search.htm">Search</a> | <a href="/task/members.htm">Profiles</a></center></div>
    </div>
    </div>
    
    
    
    <div id="maincontainer">
    
    
    
    <div id="contentwrapper">
    <div id="contentcolumn">
    
    <div class="innertube">
    <div id="colmain">
    <div id="colwrap"><div id="col2"><b>Name</b></a>
    		</div></div>
    		<div id="col1"><img src="avatar.gif" width="40px" height="40px"/></div>
    		<div id="col3">Date</div>
    		<div id="col4">Link</div></div>
    		<br/>
    </div>
    </div>
    </div>
    
    <div id="leftcolumn">
    
    Side Menu
    
    </div>
    
    
    
    
    </div><div id="footer">
    
    </div>
    </body>
    </html>

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    wincode asks:-How do I get the col2,col3, and col4 content to vertically align in the middle of the div?
    I have put the code here to help anyone who wants to have a go.

    Frank
    Last edited by effpeetee; 09-02-2010 at 10:57 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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