Having a few problems with div's.

TechnoCorruption

TechnoCorruption

TechnoCorruption

Soldato
Joined
9 May 2005
Posts
2,511
I am a real novice when it comes to html and am just trying to set up a basic 5 div single page for part of a web site I am experimenting with. I have placed the divs where I want them to be and all is great at resolutions above 1024x768.

If I try running any resolutions lower than 1024x768 or if I make a window smaller then it cuts off part of the left side of the screen and then has extra space to the far right of the page.

I am not sure if this is to do with relative/absolute on the divs? At present I have it as Microsoft Expression suggested with the container div being relative and the left and right columns and page content div being absolute, is this right?
 
Last edited:
hi, would be useful if you could post the code here. One thing to make sure is that you haven't set a fixed width of the div which is wider than the resolution you are testing at. You could set width to 100% so that it expands with your browser window size. This is only a guess so if you post the code will have a better look at it.
 
This is the code I am using for the div's, now that I look at it I think the div closing tags are in the wrong place?

<div class="DivGen">

<div id="masthead" style="width: 970px;
text-align: center;
color: red;
font-size: 30pt;
font-family: Calibri;
font-style: italic;
font-weight: 700;">
</div>

<div id="top_nav" style="width: 970px;
height: 30px;">
</div>

<div id="container" style="width: 970px;
position: relative;
left: 0px;
top: 0px;
height: 1270px;">

<div id="left_col" style="width: 170px;
position: absolute;
left: 0px;
top: 0px;
height: 1270px;
font-size: 14pt;
font-family: Calibri;
font-weight: 700;
color: yellow;
text-align: center;">
</div>

<div id="page_content" style="width: 570px;
position: absolute;
left: 200px;
right: 200px;
top: 0px;
height: 1270px;
font-size: 14pt;
font-family: Calibri;
font-weight: 700;
color: red;
text-align: left;">

<div id="right_col" style="width: 170px;
position: absolute;
right: 0px;
top: 0px;
height: 1270px;
font-size: 14pt;
font-family: Calibri;
font-weight: 700;
color: yellow;
text-align: left;">
</div>
</div>
</div>
 
yes it looks like you are using fixed widths for the divs which would explain the page extending beyond the browser window.

First of all I would suggest that you keep your css styling in an external file and then just give each div a class or id and style it that way. That is much better for maintainability and so on.

Your div layout would then look something like:

Code: 
<div class="DivGen">
<div id="masthead"></div>
<div id="top_nav"></div>
<div id="container">
   <div id="left_col"></div>
   <div id="page_content"></div>
   <div id="right_col"></div>
</div>
</div>

All your css styling would be applied in an external file. Much neater.

I am not sure exactly what layout you are wanting to achieve but you have the right idea with having a container div and then you can float the nested divs to gain whatever layout you wish.

Hope this helps somehow
 
the way i would do it is in your css file is set the html and body properties to 100% i.e.

Code: 
html, body {
   width:100%;
}

This should mean that everything will fit inside your browser window regardless of size providing you also get rid of the fixed width divs. If you really want fixed width then you could set something like 800 as 800x600 is probably the smallest resolution that would still be used today. (apart from on mobile devices!)

That should be a start anyways - if you need anymore help just drop back to this thread and will try and help you out. I'm not a real pro myself but it all takes a bit of tweaking and eventually you come up with a nice layout.
 
You must log in or register to reply here.
Back
Top Bottom