Welcome to WebmasterWorld Guest from 54.205.115.177

Forum Moderators: not2easy

Message Too Old, No Replies

simple css layout for four rows?

   
9:21 am on Dec 20, 2012 (gmt 0)



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:

<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>
10:52 pm on Dec 20, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

Chorus:
To dream ... the impossible dream ...

Horizontal scroll? Vertical scroll? No scroll at all? Sooner or later everything will overflow. If all content-- especially including width-- is constrained to exact pixels, make it "sooner" rather than "later".

If you think scroll bars are too loathsome, you could set everything to "overflow: hidden". But that generally applies only to things inside other things, not to the body as a whole.
1:52 am on Dec 30, 2012 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month




Chorus:
To dream ... the impossible dream ..


....unless you just use a table.
12:16 pm on Dec 30, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



....unless you just use a table.

Only if you don't know what you're doing.

We do this all the time. Our pages must fit phones to 30-inch monitors using the same markup. Getting same markup to fit on all devices without scrollbars is possible depending on the content but, if you want all that content readable and images viewable, that all needs to be sized to fit.