www.webdeveloper.com
Results 1 to 2 of 2

Thread: Layout Assistance

  1. #1
    Join Date
    Feb 2009
    Posts
    6

    Layout Assistance

    Hi all,

    I have tried five times to either upload or type this but something is a little wrong so here goes again.

    I need some assistance on how to code this CSS to create a page correctly.

    Overall I have a div calledwrapper that is to be 98% of the screen in width and the height needs to be automatic.

    Inside this there are two divs: leftwrapper and rightrapper. rightwrapper has to be 30% of the screen whilst the leftwrapper can take up the rest.

    Inside leftwrapper are four further divs (See HTMLcode below).

    Inside rightwrapper are five further div (see HTML code below).

    Inital problem is how to get the left and right wrappers to sit alongside one another.

    Next question is if I add these other divs they will be just above one another?

    I need the following divs (penpic and S_by_S) to be of automatic height as there maybe a lot of text in one or the other.

    Can you guys help please?


    CSS (mystyle)
    Code:
    /* CSS Document */
    #container {
    	width: 98%;
    	height: auto;
    	text-align: left;
    	margin: auto;
    }
    #leftwrapper {
    	float: left;
    	width: 48%;
    	padding-bottom: 10px;
    	background-color: #ggg;
    }
    #rightwrapper {
    	float: right;
    	width: 48%;
    	padding-bottom: 10px;
    	background-color: #fff;
    }

    HTML
    Code:
    <html>
    <head>
    
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
    
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div id="leftwrapper">
    
    <div id="penpic">
    Penpics
    </div <!-- close penpic -->
    
    <div id="debut">
    Debut Info
    </div><!-- close debut -->
    
    <div id="firstgoal">
    First Goal Info
    </div><!-- close firstgoal -->
    
    <div id="S_by_S">
    Season By Season info
    </div<!-- close S_by_S -->
    
    </div><!-- close leftwrapper -->
    
    <div id="rightwrapper">
    
    <div id="playerpic">
    Player image file inserted
    </div><!-- Close playerpic -->
    
    <div =id"DOB">
    Date Of Birth
    </div><!-- close of DOB -->
    
    <div id="apps">
    Appearances
    </div><!-- close of apps -->
    
    <div id="goals">
    Total Goals
    <div id="sponsor">
    Sponsor
    </><!-- close sponsor -->
    
    </div><!-- close rightwrapper -->
    
    </div><!-- close wrapper -->
    </body
    </html>

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there Lensmeister,

    does this help...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <link rel="stylesheet"  href="mystyle.css">
    
    <style>
    #wrapper {
        width:98%;
        padding-bottom:10px;
        margin:auto;
        overflow:hidden;
        background-color:#ddd;
     }
    #leftwrapper {
        float:left;
        width:48%;
        background-color:#fff;
     }
    #rightwrapper {
        float:right;
        width:48%;
        background-color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div id="leftwrapper">
     <div id="penpic">Penpics</div> <!-- close penpic -->
     <div id="debut">Debut Info</div><!-- close debut -->
     <div id="firstgoal">First Goal Info</div><!-- close firstgoal -->
     <div id="s-by-s">Season By Season info</div><!-- close s-by-s -->
    </div><!-- close leftwrapper -->
    
    <div id="rightwrapper">
     <div id="playerpic">Player image file inserted</div><!-- Close playerpic -->
     <div id="dob">Date Of Birth</div><!-- close of dob -->
     <div id="apps">Appearances</div><!-- close of apps -->
     <div id="goals">Total Goals</div><!-- close of goals -->
     <div id="sponsor">Sponsor</div><!-- close sponsor -->
    </div><!-- close rightwrapper -->
    
    </div><!-- close wrapper -->
    
    </body>
    </html>

    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles