simple css layout for four rows??

BobbyRachel · 12-20-2012, 08:49 AM

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>

sunfighter · 12-20-2012, 01:17 PM

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 //