3 Replies - 695 Views - Last Post: 25 May 2012 - 03:57 PM

#1 pietomb00  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 68
  • Joined: 28-June 11

Problem with layout using divs in CSS

Posted 24 May 2012 - 07:30 AM

Hi All,

I'm trying to get my head around HTML and CSS, but I've got a problem with my layout, it works fine on my main monitor, with has the resolution set to 1600x900, but on my second one with a resolution of 1024x768 things move, I'm fine writing it on my main one, but see there being problems later.

The main problem is that on the second monitor, the main content section covers the right hand column, I think this is because it has it's positioning set to absolute, and the right column is using float. But when I change either of these other things don't sit in the right place.

Any ideas how to sort this? Or at least hints of how layout should be done?

The CSS:
<div id="title">Title</div>

<div id="PageContainers">
<div id="leftnavigation">LeftNav</div>
<div id="rightPannel">Right Pannel</div>
<div id="content">Content</div>
<div id="mainNav">Main Navigation</div>
</div>

#PageContainers {
height:100%;
width:100%;
margin:0 auto;
position: relativ;
}

#title {
width : 100%;
height: 86px;
background-color: #FFCB40;
}

#mainNav {
position: absolute; top:86px; left:160px;
height: 35px;
background-color: #7C45D6;
width: 78%;
}

#leftnavigation {
float: left;
margin:10px;padding:1px;
  width : 10%;
height:100%;
  background-color : #FFD973;
  
}

#rightPannel {
float: right;
margin-top:100px;
margin:10px;padding:0;
  width : 10%;
height:100%;
  background-color : #FFD973;
  
}

#content {
background-color: white;
position: absolute;left:160px; top:121px;
width: 78%;
height:100%;
}



The HTML
<head>
<Title> My Test Page</Title>
<link rel="stylesheet" text="text/css" href="Style.css" />
</head>

<body>
<div id="title">
<h1>This is the title of my page</h1>
</div>

<div id="mainNav">
<ul>
<li><a href="SecondPage.html">Navigation Bar</a></li>
</ul>
</div>

<div id="leftnavigation">
<h2> Left Column</h2>
<p> Hi</p>
<p> These are my links as well</p>
<p> Don't know why I need two sets</p>
<p>  :S </p>
</div>

<div id="content">
<p> This is the main text of the page</p>
<p> It is...honest</p>
<img style="position: absolute; right:0" src="pic.jpg" 
alt ="Picture" width="210" height="210"/>

</div>

<div id="rightPannel">
<h2>Right Pannel</h2>
<p> Some Text!</p>
</div>

</body>



I have attached a screenshot of how it should look (and does at 1600x900)Attached Image

Is This A Good Question/Topic? 0
  • +

Replies To: Problem with layout using divs in CSS

#2 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Problem with layout using divs in CSS

Posted 24 May 2012 - 09:22 AM

Yes - do not use absolute positioning for the layout.

If you want a fluid i.e. variable width site (based on percentages, which will change in size and you re-size your browser) then take a look at this example - http://www.awestypro..._tut/index.html

The other option is a fixed width template, ie it will always be the same width no matter what size the browser is (On smaller screens it will just add horizontal scrollbars.) Check out an example of a fixed width template here : http://www.code-suck...ts/fw-36-3-col/

There's also a big list of fixed width templates of various layouts on the same site: http://www.code-suck...th-css-layouts/
Was This Post Helpful? 1
  • +
  • -

#3 pietomb00  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 68
  • Joined: 28-June 11

Re: Problem with layout using divs in CSS

Posted 25 May 2012 - 04:35 AM

Brilliant, thanks revolution.

I used the first example with the 'fluid' design. I totally rewrote my CSS using that as a guide as it seemed easier than trying to fix it.

Thanks
Was This Post Helpful? 0
  • +
  • -

#4 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 800
  • View blog
  • Posts: 1,688
  • Joined: 30-January 09

Re: Problem with layout using divs in CSS

Posted 25 May 2012 - 03:57 PM

While I admire then post and the links that revolutionx has provided, I have to disagree with the first line of their post.

Fluidity of layout has nothing to do with absolute positioning. Bad use of absolute positioning will ruin fluidity, just the same as bad use of floats will, or use of tables can.

With absolute positioning, you can set top/left/bottom/right/height/width all to percentages, which would achieve the same output as the first link posted by revolutionx, as demonstrated below:
Spoiler

Really, it comes down to personal choice, and what you're comfortable with. There's several ways to achieve any layout. Some techniques have certain benefits over others, and with experience you learn which styling methods suit which task.

I've used absolute positioning through my entire site, with no loss of fluidity, and no "hacks" to get things working. This is because I've developed an understanding of how absolute positioning works, and how it works when combined with other layout methods.

This post has been edited by e_i_pi: 25 May 2012 - 04:00 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1