The size of div in any monitor screen problem

HTML & CSS
1

Hi,
I need some help regarding the size of my div that i made in the bigger screen monitor,when i tried to look at in the smaller monitor my div is overlapping in the screen some buttons are not visible i need to resize the browser into smaller in order to see all the buttons…what is the correct way in using the units for div, % or px ? so that it will not overlap in the small screen monitor.can you help me please.

Thank you in advance.

2

You need to use % so it scales but you may need to do some work on the child elements. Using px will mean that the div remains at the same width/height regardless of monitor size.

3

Hi RichardAskew,Thank you for the reply…okay i will try this and i will write back to you if i have problem.thank you.

4

Hi,

If you are making your page a fixed px width then obviously on devices smaller than that width you will have to scroll to see the content.

Converting a layout from fixed to fluid is more than just changing the main container from px to percent as you need to make sure all the inner elements will re-position accordingly (as already mentioned in the post above). A fluid site needs to be planned carefully and to take into account that a screen size will change and elements reorganised as a result.

These days responsive is the buzzword but requires a lot of work to make a site become fully responsive.

You may need to post some code if you get stuck again so we can see what needs to be done.

5

hi paul,thank you for the reply…can i ask what is fluid?

thank you in advance.

6

Hi,

Fluid is when you use percentages to size the container and allow the content inside to reorganise to fit.
At is simplest level its just this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#outer {
	width:80%;
	margin:20px auto;
	background:#f9f9f9;
	border:5px solid red;
	padding:10px;
}
</style>
</head>

<body>
<div id="outer">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ante, posuere at pretium vel, laoreet ut orci. Integer sodales, dolor id sagittis volutpat, dui justo pharetra massa, id mollis massa magna eu nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum faucibus tempor enim et vulputate. Nunc ultrices orci eget risus elementum fermentum. Donec in lorem libero, ut auctor orci. Ut sed tortor nunc, lacinia porttitor sapien. Aenean sagittis, metus ac porttitor tincidunt, neque ante dictum arcu, pulvinar fermentum tortor lectus in mi. Etiam id aliquam diam. Ut vel ipsum et dui aliquet scelerisque. Proin enim diam, vehicula vitae volutpat sed, varius ut urna. Morbi felis arcu, tempor quis volutpat nec, ultrices in metus. Vestibulum id ante neque. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ante, posuere at pretium vel, laoreet ut orci. Integer sodales, dolor id sagittis volutpat, dui justo pharetra massa, id mollis massa magna eu nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum faucibus tempor enim et vulputate. Nunc ultrices orci eget risus elementum fermentum. Donec in lorem libero, ut auctor orci. Ut sed tortor nunc, lacinia porttitor sapien. Aenean sagittis, metus ac porttitor tincidunt, neque ante dictum arcu, pulvinar fermentum tortor lectus in mi. Etiam id aliquam diam. Ut vel ipsum et dui aliquet scelerisque. Proin enim diam, vehicula vitae volutpat sed, varius ut urna. Morbi felis arcu, tempor quis volutpat nec, ultrices in metus. Vestibulum id ante neque. </p>
</div>
</body>
</html>

However most sites are not just text so its not just as simple as that. You have to allow elements to wrap to the next line or to shrink as much as possible. It gets more complicated when you have images and certain layout structures because they will also need to be fluid or at least small enough not to poke out at smaller sizes.

You can read more info here.

7

Thank you paul for the quick reply…okay i will read this and i will write back to you if i have some doubt.more power to you always.