• 0

Div Coding Help


Question

Hi,

As some of you know, recently I've been having a few goes at using Divs and CSS opposed to tables. I have tried using divs a few times for small projects, and I keep running into similar problems of getting things to align properly as required, without impeding the site at higher/lower resolutions and/or in different browsers. So basically, if it works in one browser, it fails in another. If it works in all browsers, it goes berserk at a higher or lower resolution than the one I am working on (1024x768). Accessibility, and compatibility are a key issue with this particular design, so I want it to function on any resolution (so percentage widths are better), and also to appear 99% correct in Firefox, Opera and Internet Explorer. I have been playing with the code all day, looking at tutorials and code samples for help, but I just go round in circles.

Here is my HTML code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="tabs">
  Tabs will go here!
</div>
<div id="header">
  Header band, header image, search and cart!
</div>
<div id="navbar">
  Login, register, etc, etc.
</div>
<div id="content">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque neque ligula, vestibulum eu, lacinia eu, faucibus at, ante. Aliquam porta turpis ac pede tempus vestibulum. Vestibulum non velit ut orci placerat sodales. Aenean eu nulla. Donec molestie placerat orci. Nam arcu lacus, suscipit et, facilisis nec, egestas at, dolor. In dignissim dolor a enim. Nam vitae velit id tellus elementum consectetuer. Suspendisse potenti. Sed ligula. Donec sed ante id mauris eleifend posuere. Suspendisse potenti. Nam viverra vestibulum nisl.
</div>
<div id="sidebar">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque neque ligula, vestibulum eu, lacinia eu, faucibus at, ante. Aliquam porta turpis ac pede tempus vestibulum. Vestibulum non velit ut orci placerat sodales. Aenean eu nulla. Donec molestie placerat orci. Nam arcu lacus, suscipit et, facilisis nec, egestas at, dolor. In dignissim dolor a enim. Nam vitae velit id tellus elementum consectetuer. Suspendisse potenti. Sed ligula. Donec sed ante id mauris eleifend posuere. Suspendisse potenti. Nam viverra vestibulum nisl.
</div>

<div id="footer">
  Copyright.
</div>
</body>
</html>

and here is my css code:

body, html {
  margin:0;
  padding:0;
  background: white;
  height: 100%;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: Trebuchet MS, Tahoma;
  font-size: 11px;
}

#tabs {
  background: #ff5a00;
  width: 100%;
  height: 20px;
  font-family: Tahoma;
  font-size: 10px;
  font-weight: bold;
  color: white;
}

#header {
  background: url(images/headbg.gif);
  width: 100%;
  height: 132px;
  font-family: Tahoma;
  font-size: 10px;
  font-weight: bold;
  color: #ffe7ce;
}

#navbar {
  background: #d9d9d9;
  width: 100%;
  font-family: Tahoma;
  font-size: 11px;
  font-weight: bold;
  color: #ff8400;
  border-top: 1px solid #434343;
  border-bottom: 1px solid #434343;
  padding: 5px;
}

#content {
  width: 80%;
  float: left;
}

#sidebar {
  width: 20%;
  float: right;
}

#footer {
  background: #7e00ff;
  width: 100%;
  clear: both;
}

Now what I want is this;

Page is full width of browser window (whatever the resolution).

Sidebar is approximately 15% wide and aligned on the right.

Content area is 85%.

Sidebar has a border on the left (between content and sidebar).

Navbar, Content, Sidebar and Footer all have padding of 3 px.

Page must look the same (or have few differences) in different browsers and at different resolutions.

Now I have been designing it with these things in mind, and have read tutorial, after tutorial, but I always encounter the same problems! If the columns sit side by side, and look the same at different resolutions I am unable to add the padding without it pushing things too wide (I have read a tutorial on Pixel2Life about having something like a containing div, but that didn't work either!). If I do get the columns working together, then I end up with a design that only looks good at 1024x768!

Maybe I am over-looking something simple, but if someone could have a look at my code, and tell me what needs changing, I would be very grateful, as I tend to use this basic layout in quite a few designs I do.

Thanks for your help. :)

Also posted on Pixel2Life

Link to comment
https://www.neowin.net/forum/topic/418896-div-coding-help/
Share on other sites

3 answers to this question

Recommended Posts

  • 0

I think I got it fixed, thanks to http://glish.com/

All the other sites I found, were setting a float on the right-hand sidebar, instead of the way it has been shown on glish.com. I also managed to fix the padding making the width too wide, by setting a max-width attribute (don't know why I didn't think of it earlier). Thanks anyway.

  • 0
  Joel said:

When typing html into a post, use the

 tag, not the code tag. That way, you will see it colour coded. I fixed your earlier entry, so you can see the difference.

ew... that needs an overhaul. the HTML tag doesn't retain nesting... i'd reather read it without the few colors it actually throws in there...

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • I guess we can agree to disagree. I had the completely opposite experience, and not just that it annoyed me, I was frequently unable to use the sites I visited regularly.
    • Yeah, so reliable, it kept failing to install via Windows Update with the following error on my i7 Surface Pro 7+, stating it's not even ready almost a year later:
    • Reminds me of the meme with Obama giving Obama a medal.
    • 😂😂😂😂. ok whatever you say MS.
    • Samsung rolls out next big UI update to Galaxy Watch Ultra by Devesh Beri Samsung has announced that its Galaxy Watch Ultra now receives One UI 8 Watch, which means that Galaxy Watch Ultra users now have access to new health tools designed to support daily wellness, including Running Coach, Vascular Load, and Antioxidant Index. The new interface on One UI 8 Watch has been made to give important information swiftly on the watch’s small screen. One can customize Multi-Info Tiles, which have health data, weather, and other metrics. The Now Bar, first introduced in One UI 7, keeps current actions and tasks always within reach. Samsung says the update brings more tools to improve sleep, heart health, fitness, and nutrition. The Galaxy Watch Ultra now features Bedtime Guidance, which provides personalized sleep times based on recent sleep trends, and the ability to measure vascular load during rest, allowing the watch to track the stress placed on the heart during sleep. These features, even though they are visible on the Samsung Health app for users of older watch models, can only be used by Watch8 users. It also comes with a Running Coach. The watch will analyze a 12-minute run to set a level and then give a training plan for goals like a marathon or a new distance. The Antioxidant Index measures the levels of skin carotenoids in seconds. It provides feedback on lifestyle choices that can help with healthy aging. Samsung says these updates are aimed at giving a more complete health experience, using instant feedback to help guide users’ choices. The Samsung Galaxy Watch8 was officially unveiled on July 9, 2025, at the Galaxy Unpacked event along with all-new Galaxy Z Fold7, Galaxy Z Flip7, and Galaxy Z Flip7 FE. This series consists of 3 different watches: the Watch8, Watch8 Classic (the one with rotating bezel), and Watch Ultra (2025). Source: Samsung
  • Recent Achievements

    • Week One Done
      SmileWorks Dental earned a badge
      Week One Done
    • Community Regular
      vZeroG went up a rank
      Community Regular
    • Collaborator
      Snake Doc earned a badge
      Collaborator
    • Week One Done
      Snake Doc earned a badge
      Week One Done
    • One Month Later
      Johnny Mrkvička earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      589
    2. 2
      Michael Scrip
      199
    3. 3
      ATLien_0
      195
    4. 4
      +FloatingFatMan
      133
    5. 5
      Xenon
      122
  • Tell a friend

    Love Neowin? Tell a friend!