Home/ Questions/Q 6071605
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T10:03:59+00:00

when i made my website i made it with div tags not tables, which

  • 0

when i made my website i made it with div tags not tables, which is what most people do, then i positioned them with the margin property and i have tried it with position:absolute, and relative properties but when i re-size my browser everything changes place, like this – enter image description here

i want it to stay in place were it is like most websites that use div tags, when you re-size them they don’t move, i wonder what trick they use…

and by the way my website is still in progress lol… Thank You

My Code

<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "verdanacssstylesheet.css" />
<script type="text/javascript" src="external files/jquery.js"></script>
<!-----------START OF SCRIPT------------------------>
<script type = "text/javascript" >

</script>
<!------------END OF SCRIPT AND START OF STYLE-->
<style type = "text/css" >
div {border:2px solid black;}

</style>
<!---------------END OF STYLE AND HEAD AND START OF BODY---------->
</head>

<body style="margin:0px;padding:0px;" text="black" >
<div style="" >
<div id = "header" style="100%;height:150px;" >
<div id = "headerinside" style="margin-left:auto;margin-right:auto;width:1030px;height:150px;" ><div></div></div>
</div>
<div style="width:1030px;height:;margin-left:auto;margin-right:auto" >

<div style = "border:2px solid red;height:30px;" id = "navigationbar" >
<ul style = "list-style:none;" id = "navbar" >
<li style = "float:left;padding-left:45px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
</ul>
</div>

<div id = "main" style="">
<div style="width:1026px;text-align:center;" ><p>hello</p></div>
</div>
<div id = "footer" style="100%;height:150px;" >
<div id = "footerinside" style="margin-left:auto;margin-right:auto;width:1030px;;height:150px;" ><div></div></div>
</div>
</div>
</body>
<!---------------EDN OF BODY------------------->
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    divs are block elements, which means they automatically expand to fill the width of their containing element. If you don’t want them to expand with the browser window, you should consider wrapping them in a containing div with explicit width, or setting explicit width for each div.

    That’s my best guess based on your mock-up; if you post some code on jsfiddle for example, you may get a more specific answer 🙂

    [Update]

    I’ve cleaned up your code somewhat. I don’t think all the divs had matching opening and closing tags, but it was hard to tell.

    I’ve removed your CSS from the inline styles. There was a lot of duplication which, apart from making the code hard to read, also meant that changes weren’t necessarily showing up because they were being overridden in other declarations.

    The key in my modified version is the <div id="wrapper">. You’ll see in the corresponding style that #wrapper is set to 500px wide and centred horizontally.

    Here’s the jsfiddle with my updates.

    • 0