problem with font size

**mayanktalwar1988** · 10-03-2009, 01:11 PM

Code:

<style>
body
{
overflow:auto;
}
div.child
{
background-color:#47ccd8;
position:absolute;
width:60%;


}
div.second
{background-color:#6d8a13;
position:absolute;
width:30%;
left:65%;
}


</style>




<body>

<div class="child">
ggfac
ngnnnnnnnnnnnnngfzh hfh h  t yj yru  rur  ruyr  ryu yu yrr6yu u r ur  rutr  ur ur u u 6uu  uur  u  

</div>

<div class="second">
gdgefges
<div>
</body>

hey i am struggling in this i have designed and coded pages php but after doing all stuff and satisfeid with work i changed the fontsize in browser
...after that text started flowing out of there respective divs
just put it in simple way i posted above simple script which has similar issues how to make design flexible enough so that it become strong enough to changes in fontsize made by users so that it remain in it original style without text running out of the divs

**simcomedia** · 10-03-2009, 06:55 PM

You need to set a default text in your CSS like this. Plus, the position: absolute; needs to be associated with a 'relative' element. So, skip the absolute and use the 'float' method of aligning blocks.

<style type="text/css">

#container {
width: 800px;
margin: auto;
padding: 0;
}
.child {
float:left;
background-color:#6d8a13;
overflow: auto; /* so the text expands the height*/
width: 100%;
}

div.second
{background-color:#6d8a13;
float: left;
width:100%;
}

body {

font-family: Arial;
font-size: 10pt;
font-style: normal;
}
</style>

<body>
<div id="container">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam non est vel odio hendrerit dignissim at quis dui. Fusce laoreet erat non urna lacinia porta. Maecenas ac metus lacus, nec convallis ligula. Cras in eros in felis rutrum varius vel eu dolor. Nunc lorem erat, adipiscing non aliquam elementum, accumsan sed mi. Mauris urna eros, suscipit sit amet tristique rhoncus, venenatis a nunc. Cras eget nunc quam, a mattis libero. Etiam sit amet auctor dolor. Vivamus pretium iaculis justo vitae faucibus. Nulla orci nisi, accumsan sed semper ac, bibendum id erat.
</div>
<div class="second">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam non est vel odio hendrerit dignissim at quis dui. Fusce laoreet erat non urna lacinia porta. Maecenas ac metus lacus, nec convallis ligula. Cras in eros in felis rutrum varius vel eu dolor. Nunc lorem erat, adipiscing non aliquam elementum, accumsan sed mi. Mauris urna eros, suscipit sit amet tristique rhoncus, venenatis a nunc. Cras eget nunc quam, a mattis libero. Etiam sit amet auctor dolor. Vivamus pretium iaculis justo vitae faucibus. Nulla orci nisi, accumsan sed semper ac, bibendum id erat.
</div>
</div>
</body>

Thread: problem with font size

Thread Tools

Search Thread

problem with font size

Bookmarks

Bookmarks

Posting Permissions