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 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post simple css layout for four rows??

    Hi,

    I have a page which has five inner div's and one outer div.. the problem is i want to set everything to my screen without getting scroll bars.. i mean the page for 100% screen.. how much may be the content, it should come without scroll bars... and it should work well in all browsers and also in all screen types.. to get all the content in the middle of the page i gave some pixels to outer div's width and height... am newbie to css.. please help me out..

    here is my code:

    Code:
    <head>
    <title>home</title>
    <style type="text/css">
    body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    div.outer {  display: block; margin-left: auto;margin-right: auto;width:970px;height:630px;position:relative;}
    </style>
    </head>
    <body class='claro'>
    <div class='outer' style="border:1px solid black;">
    <div id="dottedBorderhome">
    </div>
    <div id="dragIconhome">
    </div>
    <div class="claro" id="divImage2" style="left: auto; position: absolute; top: 3px;">
         <img class="images" id="image2" name="Search-icon2.png" style="height: 50px; width: 58px;"> // row 1
    </div>
    
    <div class="claro" id="divlabel43" style="left: 50px; position: absolute; top: 25px;">
        // here label comes:: the above image and this label will come in single row... // row 1
    </div>
    
    <div class="claro" id="htmlTableDiv9" onmouseup="setDocStyle(this.id)" style="left: auto; position: absolute; top: 70px;">
       <table border="0" cellpadding="1" cellspacing="1" class="tableborder" id="htmlTable9" onclick="modifyHtmlTableProperty('htmlTableDiv9','xy',this.id);" style="height:70px; width:150px;">
       // table content comes.... row 2
       </table>
    </div>
    
    <div id="CWPWORKLIST__1" onclick="setWidgetproperty(this.id,'xy','inner__CWPWORKLIST__1')" ondblclick="editDataGridResponseMapping(this.id)" onmouseup="setDocStyle(this.id)" style="left:auto; position:absolute; top:280px; width:1040px;">
         <table class="claro" dojotype="dojox.grid.DataGrid" id="inner__CWPWORKLIST__1" rowselector="10px" style="height: 296px; width: 921px;">
    	 // table content comes... row 3
    	 </div>
    	 
    <div class="claro" id="menuDiv1" onclick="setWidgetproperty(this.id,'x','navMenu1');" onmousedown="setMenuBarProperty('navMenu1');" onmouseup="setDocStyle(this.id)" style="border:1px dotted white; left: auto; position: absolute; top: 580px;">
    
         // here menubar content will come... row 4
    </div>
    </body>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,026
    Thanks
    23
    Thanked 588 Times in 587 Posts
    You say you have five inner div's and one outer div. But you have one outer div
    Code:
    <div class='outer' style="border:1px solid black;">
    And 7 other divs. Your outer div is missing and end tag. Not sure where to put it So placed it around everything. You second table is missing an end tag. I added it. I put boarders around the divs so you can see where they go. Just divs are in black. The ones you use position: absolute; are in blue. I also added some text to make them visible.
    Take a look:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>home</title>
    <style type="text/css">
    body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    div.outer
    {
    	//display: block;
    	margin-left: auto;
    	margin-right: auto;
    	width:970px;
    	height:630px;
    	//position:relative;
    }
    </style>
    
    </head>
    
    <body class='claro'>
    <div class='outer' style="border:1px solid black;">
    	<div id="dottedBorderhome" style="border:1px solid black;">ONE</div>
    	<div id="dragIconhome" style="border:1px solid black;">TWO</div>
    	<div class="claro" id="divImage2" style="left: auto; position: absolute; top: 3px;border:1px solid blue;">
    	     <img class="images" id="image2" name="Search-icon2.png" style="height: 50px; width: 58px;">THREE
    	</div>
    
    	<div class="claro" id="divlabel43" style="left: 50px; position: absolute; top: 25px;border:1px solid blue;">FOUR</div>
    
    	<div class="claro" id="htmlTableDiv9" onmouseup="setDocStyle(this.id)" style="left: auto; position: absolute; top: 70px;">
    	   <table border="1" cellpadding="1" cellspacing="1" class="tableborder" id="htmlTable9" onclick="modifyHtmlTableProperty('htmlTableDiv9','xy',this.id);" style="height:70px; width:150px;">
    	   </table>
    	</div>
    
    	<div id="CWPWORKLIST__1" onclick="setWidgetproperty(this.id,'xy','inner__CWPWORKLIST__1')" ondblclick="editDataGridResponseMapping(this.id)" onmouseup="setDocStyle(this.id)" style="left:auto; position:absolute; top:280px; width:1040px;">
    	     <table border="1" class="claro" dojotype="dojox.grid.DataGrid" id="inner__CWPWORKLIST__1" rowselector="10px" style="height: 296px; width: 921px;">
    		 </table>
    	</div>
    
    	<div class="claro" id="menuDiv1" onclick="setWidgetproperty(this.id,'x','navMenu1');" onmousedown="setMenuBarProperty('navMenu1');" onmouseup="setDocStyle(this.id)" style="border:1px dotted white; left: auto; position: absolute; top: 580px;border:1px solid blue;">
    	FIVE</div>
    </div>
    </body>
    </html>
    To comment in html use <!-- --> Not //


  •  

    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
    •