homepage Welcome to WebmasterWorld Guest from 54.196.189.229
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
simple css layout for four rows?
BobbyRachel




msg:4529843
 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>

 

lucy24




msg:4530056
 10:52 pm on Dec 20, 2012 (gmt 0)

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.

seoskunk




msg:4531958
 1:52 am on Dec 30, 2012 (gmt 0)


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


....unless you just use a table.

drhowarddrfine




msg:4532004
 12:16 pm on Dec 30, 2012 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved