1. Home
  2. Forums Index
  3. Browser Side / CSS 4:15 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

the page rearranges itself when it is sized smaller

         

cameraman_2

6:40 pm on Aug 13, 2010 (gmt 0)

10+ Year Member



Well if that made any since, the problem I am having is I'm using div to run my page. When I resize the window smaller than the page is then the entire right column moves below the left. Here is a pic of what it does, [pinnalcepromedia.com ]


Here is the css;
body
{
margin: 30px;
padding: 0px;
font-size: 10px;
font-family: "Georgia", Arial, serif;
color: ffffff;
overflow: auto;
}

/*center page on screen*/
#content
{
margin:0px auto;
min-width: 950px;
width: 950px;
}

/*menu*/
#sidemenu
{
float: left;
background: #000000;
background-image:url(../images/sidebar.jpg);
width: 183px;
height: 773px;
}

/*Logo*/
#logo
{
background: #000000;
float: left;
background-image:url(../images/top.jpg);
width: 762px;
height: 101px;
}

/*line graphic*/
#linetop
{
background: #000000;
float: left;
background-image:url(../images/line.jpg);
width: 762px;
height: 3px;
}

/*main body*/
#mainbody1
{
background: #000000;
float: left;
width: 762px;
height: 616px;
overflow: auto;
}

/*line graphic*/
#linebottom
{
background: #000000;
float: left;
background-image:url(../images/line.jpg);
width: 762px;
height: 3px;
}

/*copyright*/
#copyright
{
background: #000000;
color: #ffffff;
float: left;
width: 762px;
height: 40px;
padding-top: 10px;
}


Here is the html;
<body topmargin="0" leftmargin="0" bgcolor="#ffffff" background="<?php echo $mosConfig_live_site;?>/templates/ziggy/images/bac_page.png">
<!--side menu-->
<div id="sidemenu">
<?php mosLoadModules ( 'left' ); ?>
</div>
<!--/side menu-->
<!--logo-->
<div id="logo"></div>
<!--/logo-->
<!--graphic-->
<div id="linetop"></div>
<!--/graphic-->
<!--main body-->
<div id="mainbody1">
<?php mosMainBody(); ?>
</div>
<!--/main body-->
<!--graphic-->
<div id="linebottom"></div>
<!--/graphic-->
<!--copyright-->
<div id="copyright">
<center>
&copy;
</center></div>
<!--/copyright-->

cameraman_2

6:45 pm on Aug 13, 2010 (gmt 0)

10+ Year Member



[pinnaclepromedia.com ]

here is the correct image path

cameraman_2

12:07 am on Aug 14, 2010 (gmt 0)

10+ Year Member



This is my first time using <div> I have googled and googled and still have yet to find the answer on what I'm doing wrong. I usually write in all tables and wanted to give this a try. So far I love it and it is a lot less code.

JevgeniBogatyrjov

1:15 am on Aug 14, 2010 (gmt 0)

10+ Year Member



Hello cameraman_2,

You need to add all your divs to a so called container div.
The container div needs to have width:950px; And that is practically it.

So you code would be something like: 


body{
margin:30px;
padding:0px;
font-size:10px;
font-family:"Georgia", Arial, serif;
color:#fff;
overflow:auto;
}

#content{
margin:0px auto;
width:950px;
}

#sidemenu{
position:relative;
float:left;
background-color:#000;
background-image:url(../images/sidebar.jpg);
width:183px;
height:773px;
}

#logo{
background-color:#000;
position:relative;
float:left;
background-image:url(../images/top.jpg);
width:762px;
height:101px;
}

#linetop{
background:#000;
float:left;
background-image:url(../images/line.jpg);
width:762px;
height:3px;
}

#mainbody1{
background:#000;
float:left;
width:762px;
height:616px;
overflow:auto;
}

#linebottom{
background:#000;
position:relative;
float:left;
background-image:url(../images/line.jpg);
width:762px;
height:3px;
}

#copyright{
background:#000;
color:#fff;
position:relative;
float:left;
width:762px;
height:40px;
padding-top:10px;
}



<body>
<div id="content">
<div id="sidemenu"></div>
<div id="logo"></div>
<div id="linetop"></div>
<div id="mainbody1"></div>
<div id="linebottom"></div>
<div id="copyright">&copy;</div>
</div>
</body>


All in all there is much to learn. I suggest you to read some articles about 2-column layouts. They aren't very hard to swollow and are interesting to study.

There are plenty of errors in your css and html. Few of them (not all):

- Use css whenever possible instead of html attributes.
- <div id="copyright"> - tag not closed
- <center> tag is depricated - use css instead, such as (text-align:center; or margin-auto;).
- I see you have #content in your css file, but no #content div in html.
- min-width: 950px; width: 950px;? - doesn't make sense. Thing that would make sense is width:950px; min-width:950px;
but in your case width:950px; is enough.

Getting back to the answer to you question, you need to implement larger width to parent element then the sum of children elements' width if you want them to fit inside the parent.

Major_Payne

1:50 am on Aug 14, 2010 (gmt 0)



Anytime you adjust any browser's viewing window to less than your set page width (width: 950px; ), you will start to run into problems as you described. Even with so-called flexible layouts using percents (width: 95%; ). I used 95% because to center any container you must use a width less than 100%.

Pages with images will be especially hard to make flexible as keeping the proper aspect ratio of images is difficult using percents.

Might help...

Choosing Dimensions for Your Web Page Layout:

[elated.com...]
How to create flexible sites quickly using standards like CSS and XHTML: [ibm.com...]
In Search of the Holy Grail: [alistapart.com...]

Care With Font Size: [w3.org...]

cameraman_2

3:18 am on Aug 14, 2010 (gmt 0)

10+ Year Member



Thanks, I was just sitting here thinking that a container Div might work. I will check out the other stuff as well.

Major_Payne

4:53 am on Aug 14, 2010 (gmt 0)



If pinnaclepromedia.com is your new site, may I recommend that you stay with divs and CSS and NOT use tables except for their intended original use...tabular data layouts?

So far, you have just one CSS [jigsaw.w3.org] coding error. Since you just started, now is a good time to correct the HTML coding errors [validator.w3.org], too.

Even use of a XHTML 1.0 Transitional requires strict coding and you would benefit by validating all your code as you go.

cameraman_2

6:16 am on Aug 14, 2010 (gmt 0)

10+ Year Member



Yes that is a new site. I just coded it last night. Thanks for the info. I will keep those sites on hand. I fixed all the errors for now.
Thanks,
Marshall

cameraman_2

6:17 am on Aug 14, 2010 (gmt 0)

10+ Year Member



Yes that is a new site. I just coded it last night. Thanks for the info. I will keep those sites on hand. I fixed all the errors for now.
Thanks,
Marshall

Major_Payne

8:54 am on Aug 14, 2010 (gmt 0)



You're very welcome. Good luck on completion of your site.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:15 pm May 1, 2026