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>
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.
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:
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
Question
Fourjays Veteran
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:
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