• 0

[CSS/HTML] White block


Question

Hi everyone, become a bit stumped over something and I was wondering if anyone could help. ;) I'm in mid-process of redesigning and coding a website for the company I work for but I have come across an issue. :) (The best way is to describe through a screenshot):

untitled2yv2.th.jpg

Just some explanation, I have two DIVs news-area & lower-image (where the AG is) and you can see under that its dark blue, the background of the main site. Now I have the content DIV as "height:auto;" in CSS and it works perfectly. But what I need is that blue under the AG part to be filled as white for the height of the page. (Its for the news section so it will get big.)

So far, height:auto; doesn't work in the DIV & creating a whole new DIV doesn't work either as I can't specify height:auto; as I can't provide the content for the height of the other DIV.

Sorry if this doesn't make any sense, just starting to loose my paitence with this problem. ;) The CSS code is here, excuse it if its very messy just havent had chance to touch it for cleanups yet. :)

body, html {
	font-family: Arial, Sans;
	font-size:12px;
	color:#000;
	background-color:#184A6D;
	margin:0;
	line-height:1.4;
}
#container {
	width: 742px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 742px;
	height:100%;
	background-color:#FFF;
}
html>body #container {
	width: 742px;
	height:100%;
}
#container {
	width: 742px;
	height:100%;
	margin-right: auto;
	margin-left: auto; 	
	width: 742px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 742px;
}
html>body #container {
	width: 742px;
	height:100%;
}
#header {
	width:742px;
	height:258px;
	background-image:url(header.jpg);
	background-repeat:no-repeat;
}
#nav-container {
	width:252px;
	height:270px;
	position:relative;
	left:0px;
}
#lower-image {
	width:252px;
	height:318px;
	background-image:url(ag_bottom_left.jpg);
	background-repeat:no-repeat;
	background-color:#FFFFFF;
	position:relative;
	left:0px;
}
#title {
	width:490px;
	height:30px;
	background-image:url(Title-bar.jpg);
	background-repeat:no-repeat;
	float:right;
	margin-top:-588px;
}
#content-area {
	width:484px;
	height:auto;
	float:right;
	margin-top:-554px;
	margin-right:2px;
	background-color:#FFF;
}
#admin-b {
	width:36px;
	height:30px;
	background-image:url(news-admin-b.jpg);
	margin-left:450px;
}
#news-area {
	width:484px;
	height:auto;
	float:right;
	margin-top:-554px;
	margin-right:2px;
	background-color:#FFF;
}
#news-header {
	width:487px;
	height:23px;
	background-image:url(title-bar.jpg);
	background-repeat:no-repeat;
	padding-top:3.5px;
	text-indent:35px;
}

Thanks, if it makes no sense say and I will try and rewrite this. :D

JMann

Link to comment
https://www.neowin.net/forum/topic/565678-csshtml-white-block/
Share on other sites

15 answers to this question

Recommended Posts

  • 0
  sweetsam said:
You could wrap both the divs with another and give it a white background. There are many solutions for the kinda problem you have posted but its not entirely clear. It would be helpful if you can post a shot of the entire layout or post a link to a live page.

Exactly. Wrap it with a div, and if you're using floats to position them all you need is to set up a br element at the bottom with the style of "clear: both;" and you're good to go. That will make sure that the container div stretches to the bottom.

  • 0
  pixels said:
Exactly. Wrap it with a div, and if you're using floats to position them all you need is to set up a br element at the bottom with the style of "clear: both;" and you're good to go. That will make sure that the container div stretches to the bottom.

This sounds excellent, but I must be honest in saying im not 100% how to code something like that; any chance of an example? Also as for images on the page in question:

post-28082-1181290807_thumb.jpg

  • 0

Hi everyone,

I do apologise for resurrecting an old thread of mine put i'm having the same problem again, with the same site and wondering if anyone could see where I have gone wrong. First off the website is located here: http://www.ag-technology.com/part/

If you scroll down too the bottom, you can see that white gap, which I want too trail down as far as the Content on that page goes, now Karma kindly suggested using that Code which was provided and it worked fine but I came across another coding problem a few day's back and have since recoded the whole layout design. Now can anyone solve where I have gone wrong in getting that white gap filled?

If you want a link too the CSS it's here: http://www.ag-technology.com/part/res/style.css

Any help would be greatly appreciated, once again! (Y)

  • 0

It's because the news is positioned absolutely.

You need to do this as floats because the container has no idea how tall the "news" section is. Or force a height on the container if you must do it like this.

By the way, you have an accessibility issue in the fact that you've specified a pixel based font size. I know this could be seen as an issue with the browser, but it's easily fixed. Use % or em or text-based sizes, like "small".

Also, your left nav is suffering from the IE hover flicker bug. Look it up.

  • 0

Wow, I wasn't exactly suspecting all of that but thanks. (Y) First off the text issue, W3C Validation brought this up as well so I do have plan's too resolve this before release. Regarding the IE Flicker Bug, http://mauzon.com/?p=4 is that article about it on the right lines?

Now onto the main issue's, when it comes too CSS the one thing im not massively positive on working with is Floats, so anyways too avoid them for me would be a bonus until I can research them. Now when you said about forcing a height on the news-container DIV or how tall that div is, this got me a little confused:

#right-container-news {
	width:321px;
		height:582px;
	position:absolute;
	top:258px;
	margin-left:254px;
}

If you look at the Height attribute, isn't that what's telling the News-Container how "high" too be. Now that isn't going too be the way too fix this properly, and I would like a good way of sorting this problem completely. Can you, or anybody else explain the best way too code this kind of Layout up or maybe give some examples?

Sorry too be a pain,

JMann.

  • 0

"If you look at the Height attribute, isn't that what's telling the News-Container how "high" too be. Now that isn't going too be the way too fix this properly, and I would like a good way of sorting this problem completely. Can you, or anybody else explain the best way too code this kind of Layout up or maybe give some examples?"

Yes, the News knows how high to be. However the container "wrapper" is told to be 100%. This is going 100% of the window. Which it is correctly doing.

Now the "News" is being told to be absolutely positioned. So the news is "hovering" above the "wrapper". It's no longer part of the page flow.

Therefore the "News" is also doing this correctly.

If you used Floats, then it would sort itself out. The container would know what contents it had inside of it and it would probably wrap around the news "correctly" how you'd like.

So what I would do....

# Remove the height from the wrapper.

# Remove the height from the News.

# Use floats.

# Use EM instead of pixels everywhere. Even for widths.

# Remove the Box model hack you have in place. Tantek hack IIRC??? Get rid of that, you're not even changing the values for the hack.

I'm not sure if the flickering bug is related to background images. But it's flickering. Maybe you could code it differently. Maybe use a list, and put the background image on the LI instead.

  • 0
  lunamonkey said:
# Remove the height from the wrapper.

# Remove the height from the News.

# Use floats.

# Use EM instead of pixels everywhere. Even for widths.

# Remove the Box model hack you have in place. Tantek hack IIRC??? Get rid of that, you're not even changing the values for the hack.

Updated Version: http://www.ag-technology.com/part

# I removed the Height from the Wrapper DIV.

# Removed the height from the News.

# Floats & Me = Confused, sorry! Basically I put the "left-frame" in float:left; & "right-container-news" as float:right; but this made thing's go awfully messy in IE. I think it could be something too do with the margin-left I have in right-container-news. Also im slightly worried in the fact of the item which is meant too be placed on the right side of the right-news-containers. (See the attached mockup of the site attached.) Can you tell me on which DIV's the Floats are too be placed, sorry about this but this is only the second time I have really used floats. :pinch:

# EM sound's like a plan, I will do this!

# Removed this hack, show's how much attention iv'e been putting into this recently.

Thanks for any help. :unsure:

post-28082-1197460564_thumb.jpg

  • 0

I would do something like this. Change the widths accordingly. I can't be bothered to write a whole demo though, so here's as much as I can :p

html{
font-size : 62.5%;
}
body{
font-size : 1em;
}

#wrapper{
width : 75em;
overflow : hidden;/* mozilla float clearing */

}

#navigation{

width : 20em;
float : left;
}

#centreAreaThing{
 float : left;
width : 40em;

}

#rightThing{

float : right;
width : 15em;
}

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

    • No registered users viewing this page.
  • Posts

    • FocusOn Image Viewer 1.32 by Razvan Serea FocusOn Image Viewer is a fast, lightweight, and user-friendly photo viewer for Windows. It supports various image formats, offers basic editing tools, EXIF data display, and batch renaming. With a clean interface, slideshow mode, and easy navigation, it’s ideal for quickly viewing and organizing photos without unnecessary complexity or system resource usage. FocusOn Image Viewer key features: Auto Organize: Automatically sorts photos by date using your chosen template. Explorer View: Browse and manage images with thumbnails; includes basic edits like resize and rotate. Photo Editing: Crop, apply filters, correct colors, add borders or text. Non-Destructive Edits: Original images remain untouched. Photo Sharing: Post directly to blogs, Twitter, and Facebook. Email Support: Send selected images via email. Print Options: Print to fit paper size, preserve aspect ratio, or fit multiple images per page. Slideshow: View selected photos in a slideshow. EXIF Tools: View or remove EXIF data. Scanning: Import from TWAIN or WIA-compatible scanners. Set as Background: Quickly set any image as desktop wallpaper. Batch Rename: Rename images in bulk using templates. Resize Images: Resize with optimized or custom resampling methods, including multi-step resizing. Thumbnail Sizes: Choose from thumbnail sizes between 32–256 pixels. Format Support: Compatible with over 100 image formats. FocusOn Image Viewer 1.32 changelog: Added Ghostscript(AI, PDF) DPI option Fixed transparency issue when saving PDF document as image Other improvements and bug fixes Download: FocusOn Image Viewer 64-bit | Portable 64-bit | ~7.0 MB (Freeware) Download: FocusOn Image Viewer 32-bit | Portable 32-bit View: FocusOn Image Viewer Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Wall cabinet: Fiber connection (1Gbps) Patch panel 2.5Gbps Router A mini PC with Ryzen 5800H CPU and 32GB DDR4 RAM, for network related tools (Portainer, Pi-Hole, Cloudflared, Tailscale, Uptime Kuma, Wetty) A headless server running Proxmox: AMD Ryzen 9 9950X CPU, 96GB DDR5, RTX 3090 24GB GPU, 10Gbps NIC, and a bunch of NVMs, SATA SSDs, HDDs A VM with TrueNAS for backups and media server via Jellyfin, passing through the SATA storage controller A VM with an Ubuntu server acting as a web and a GPU server for AI workloads, and a TeamCity build/deploy agent for my personal projects This setup has evolved many times for the last 2 years, I have not gone completely crazy, yet (I think), but still experimenting, still learning, it is a fun and rewarding experience having a home lab!
    • Microsoft PC Manager 3.17.4.0 (Offline Installer) by Razvan Serea With Microsoft PC Manager, users can easily perform basic computer maintenance and enhance the speed of their devices with just one click. This app offers a range of features, including disk cleanup, startup app management, virus scanning, Windows Update checks, process monitoring, and storage management. Microsoft PC Manager key features: Storage Manager- easily uninstall infrequently used apps, manage large files, perform a cleanup, and set up Storage Sense to automatically clear temporary files. Health Checkup feature -scans for potential problems, viruses, and startup programs to turn off. It helps you identify unnecessary items to remove, optimizing your system's performance. Pop-up Management - block pop-up windows from appearing in apps. Windows Update - scans your system for any pending updates. Startup Apps - enable or disable startup apps on your PC, allowing you to optimize your system's startup performance. Browser Protection - rest assured that harmful programs cannot alter your default browser. Also enables you to change your default browser. Process Management - allows you to conveniently terminate any active process, ensuring optimal system performance and resource utilization. Anti-virus protection - Fully integrated with Windows Security. Safeguard your PC anytime. Quick Steps: Download Microsoft PC Manager Offline Installer (APPX/MSIX) with Adguard Adguard serves as a third-party online service, offering a user-friendly method for directly downloading appx, appxbundle, and msixbundle files from the Microsoft Store. Official download links will be generated for both the app's various versions and its dependency packages. How to download Microsoft PC Manager Offline Installer (APPX/MSIX) 1. Initially, you must find the app URL within the Microsoft Store. Access the Microsoft Store via your browser and search for "Microsoft PC Manager". Once located, copy the app URL, which includes the product ID, either from the address bar or from the provided link below. https://apps.microsoft.com/detail/9PM860492SZD 2. Now paste the app URL into the designated area, then click the check mark button to produce a direct download link. 3. To download, right-click the relevant link and select “Save link as…” from your browser's menu. Occasionally, Microsoft Edge may flag the download as insecure. In such cases, consider utilizing alternative browsers such as Google Chrome or Firefox to successfully complete the download. Microsoft PC Manager is a completely free tool optimized exclusively for use on Windows 10 (version 1809 or newer) and Windows 11. Download: Microsoft PC Manager 3.17.4.0 | from Microsoft Store View: Microsoft PC Manager Home Page Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • You might want to update to 1TB drive.  They are not very expensive these days, there are plenty of options - simple look I would think you could find a 1TB ssd or even nvme somewhere between 50 and 100 bucks. when I have moved to larger ssds in laptop in the past, you can just connect the drive via usb - image.  Then take the old drive out, put in the new drive and there you go..  If your concerned about how much space you have left this prob your best bet..   
    • I see! Wasn’t aware of that. Even though they started off with desktop app for Mac before Windows. Should be on it’s way soon! 🤞
  • Recent Achievements

    • First Post
      Johnny Mrkvička earned a badge
      First Post
    • Week One Done
      viraltui earned a badge
      Week One Done
    • One Month Later
      serfegyed earned a badge
      One Month Later
    • Dedicated
      firey earned a badge
      Dedicated
    • Dedicated
      fettermanj earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      644
    2. 2
      ATLien_0
      225
    3. 3
      Michael Scrip
      223
    4. 4
      Xenon
      153
    5. 5
      +FloatingFatMan
      144
  • Tell a friend

    Love Neowin? Tell a friend!