Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how do i keep sections from moving when i minimize window? 2

Status
Not open for further replies.
invalid4564

invalid4564

Programmer
Jul 13, 2010
16
US
Hello, i'm learning how to make a website but i'm having a problem. Whenever i minimize the browser window, the diff. sections that i have in the body of the web page move and get squished together. How can i stop this from happening?

Thank you for your help.

 
Sort by date Sort by votes
Without seeing your web page is hard to say. Usually giving your container a specific width would prevent that.

But of course it depends on how your web page is constructed.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
i did give it a specific width but it didn't make a difference.

Here is my code for the website:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type"content="text/html;charset=utf-8" />
	<title>My Website</title>
	<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>

<div id="header">
	<div class="entry">
		<h1>First Last Name</h1>
	</div>
</div>

<div id="wrap">

<div id="navigation">
	<div class="entry">
		<h2>Navigation</h2>
		<ul>
		<li class="active"><a href="#">Home</a></li>
		<li>Portfolio</li>
		<li>Bio</li>
		<li>Contact</li>
		</ul>
	</div>
</div>

<div id="links">
	<div class="entry">
		<h2>Links</h2>
		<ul>
		<li><a href="[URL unfurl="true"]http://www.dvice.com"[/URL] target="_blank">Dvice</a></li>
		<li><a href="[URL unfurl="true"]http://www.engadget.com"[/URL] target="_blank">Engadget</a></li>
		<li><a href="[URL unfurl="true"]http://www.sciencedaily.com"[/URL] target="_blank">Science Daily</a></li>
		<li><a href="[URL unfurl="true"]http://www.w3schools.com/default.asp"[/URL] target="_blank">Web3Schools</a></li>
		<li><a href="[URL unfurl="true"]http://chinesepod.com/"[/URL] target="_blank">Learn Chinese</a></li>
		<li><a href="[URL unfurl="true"]http://www.japanesepod101.com/index.php"[/URL] target="_blank">Learn Japanese</a></li>
		<li><a href="[URL unfurl="true"]http://www.robots.org/GettingStarted.htm"[/URL] target="_blank">Robotics</a></li>
		</ul>
	</div>
</div>

<div id="main">
	<div class="entry">
		<h1 class="title">Welcome</h1>
		<p class="meta">Posted by Admin on July 12, 2010</p>	
		<p>
		This is a sample entry. What you want to say on your home page goes here.
		</p>
	</div>
</div>
</div>

<div id="foot">
	<div id="footer">
		<p>&copy; 2010-2011 All Right Reserved.</p>
	</div>
<!-- end of footer -->
</div>

</body>
</html>

CSS: 
body{background:#000000 ;overflow:auto;}

h1,h2,h3,h4,h5,h6,p{font-family:"Serif",Times,Georgia,Helvetica; font-weight: normal;color:#000000;}

#wrap
{
background:#FFFFFF;
margin:0 auto;
overflow:auto;
}
#header
{
background:#000000 url('images/img3.jpg') bottom left repeat-x;
height:150px;
border:2px solid #FFFFFF;
}
#header h1
{
padding: 10px 10px 10px 10px;
margin-left:30px;
font-variant:small-caps;
color:#FFFFFF;
}

#main
{
width:600px;
margin:20px auto;
float:center;
padding:10px 10px 10px 30px;
}
#main p
{
text-indent:21px;
width:500px;
}
#main h1
{
font-variant:small-caps;
}

#navigation
{
width:150px;
float:left;
margin:20px auto;
padding: 10px 10px 10px 10px;
}
#navigation h2
{
font-variant:small-caps;
text-align:center;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
}

#links
{
width:150px;
float:right;
margin:20px auto;
padding: 10px 10px 10px 10px;
}
#links h2
{
font-variant:small-caps;
text-align:center;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
}
#foot
{
background:#77C90D url('images/img4.jpg') repeat-x top left;
margin:0 auto;
overflow:auto;
}
#footer
{
text-align:center;
border:2px solid #FFFFFF;
clear:both;
}
#footer p
{
font-family:"Serif";
color:#FFFFFF;
font-weight:bold;
font-size:small;
}
.entry ul{list-style-image:url('images/img1.gif');line-height:30px;}
.entry .title{margin:0 auto;border-bottom:1px solid #000000;}
.entry .meta{background:url('images/img2.gif') no-repeat left center;font-size:small;margin:0 auto;}
.active{color:#D84F4F;text-decoration:underline;}
a:link {text-decoration:none;color:#000000;}
a:visited {text-decoration:none;color:#000000}
a:hover {text-decoration:none;color:#D84F4F;}
 
Upvote 0 Downvote
Your specific elements have widths specified, but not the containers they found themselves in. All your elements are children of the element body, which has no specific width and therefore spans the entire width of the browser viewport. As you make the viewport smaller by resizing the browser, the container element (body) is reducing in size. When it becomes too small to accommodate the widths of all three elements, it begins to stack them.

You would need to put all the three main areas that are floated in another container and define the width of that container.

Also, there is no such value as 'center' for the float property. As such, it is ignored.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
oh ok.

i made the changes and it works.

Thank you very much for help.

 
Upvote 0 Downvote
Hi

Here on Tek-Tips we used to thank for the received help by giving stars. Please click the

* [navy]Thank Vragabond
for this valuable post![/navy]

at the bottom of Vragabond's post. That way you both show your gratitude and indicate this thread as helpful.

Feherke.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
397
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
132
lmcate
lmcate
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
466
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
714
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
430
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top