• 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

    • qBittorrent 5.1.1 by Razvan Serea The qBittorrent project aims to provide a Free Software alternative to µtorrent. qBittorrent is an advanced and multi-platform BitTorrent client with a nice user interface as well as a Web UI for remote control and an integrated search engine. qBittorrent aims to meet the needs of most users while using as little CPU and memory as possible. qBittorrent is a truly Open Source project, and as such, anyone can and should contribute to it. qBittorrent features: Polished µTorrent-like User Interface Well-integrated and extensible Search Engine Simultaneous search in most famous BitTorrent search sites Per-category-specific search requests (e.g. Books, Music, Movies) All Bittorrent extensions DHT, Peer Exchange, Full encryption, Magnet/BitComet URIs, ... Remote control through a Web user interface Nearly identical to the regular UI, all in Ajax Advanced control over trackers, peers and torrents Torrents queueing and prioritizing Torrent content selection and prioritizing UPnP / NAT-PMP port forwarding support Available in ~25 languages (Unicode support) Torrent creation tool Advanced RSS support with download filters (inc. regex) Bandwidth scheduler IP Filtering (eMule and PeerGuardian compatible) IPv6 compliant Available on most platforms: Linux, Mac OS X, Windows, OS/2, FreeBSD qBittorrent 5.1.1 changelog: BUGFIX: Don't interpret wildcard pattern as filepath globbing (glassez) BUGFIX: Fix appearance of search history length spinbox (glassez) BUGFIX: Remove dubious seeding time max value (glassez) BUGFIX: Fix ratio handling (glassez) BUGFIX: Fix compilation with Qt 6.6.0 (glassez) WEBUI: Make General tab text selectable by default (dezza) WEBUI: Add versioning to local preferences (Chocobo1) WEBUI: Make multi-rename search & replace fields use a monospace font (Atk) WEBUI: Fix wrong replacement sequence in IPv6 string (Chocobo1) WEBUI: Fix memory leak (bolshoytoster) WEBUI: Fix path autofill in set location and new category (tehcneko) RSS: Mark matched article as "read" if it refers to a duplicate torrent (glassez) WINDOWS: Update command line help message (KanishkaHalder1771) WINDOWS: NSIS: Don't require agreement on the license page (Chocobo1) LINUX: Fix preview not opening on Wayland (Isak05) LINUX: Add fallback for random number generator (Chocobo1) Download: qBittorrent 5.1.1 | Portable | ~40.0 MB (Open Source) Download: qBittorrent 64-bit installer (qt6) | 41.7 MB Links: qBittorrent Home page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Linus Torvalds releases a pretty ordinary Linux 6.16-rc3 by Paul Hill Linus Torvalds, the head and founder of the Linux kernel, has announced the release of Linux 6.16-rc3. This release comes with fixes for new features that were introduced during the merge window several weeks ago, and for old features where issues have been detected or improvements need to be made. If you remember last week, Torvalds said that rc2 seemed smaller than usual, putting it down to people going on vacation. He said this week’s rc3 seems to be in the usual ballpark for this time of the cycle, so everything looks “entirely normal.” In terms of changes, this release is “dominated” by wireless networking and GPU driver updates, however, Torvalds doesn’t think that anything really huge stands out this time. While nothing stands out Torvalds urged people to carry on testing and submitting patches. This update saw improvements to the core system and architecture. There have been improvements to ARM64 KVM that improve stability and correctness of virtualizations on ARM64. There are also improvements to RISC-V KVM and Trust Domain Extensions (TDX) for Intel which expand and secure virtualization capabilities on those architectures. On the graphics front, there are fixes for the amdgpu and amdkfd drivers that fix job handling, engine resets, display corruption, and power management features. The driver used for Qualcomm’s Adreno GPUs has been updated to improve fault handling, display timing, and driver binding. The open-source Nouveau (Nvidia) driver has been updated with fixes for GSP message queue references, potential integer overflows, buffer size adjustments, and a use-after-free bug. Finally, the Intel i915 driver has been updated to address early wedge issues, memory initializations, and build errors. There are also improvements to Wi-Fi devices (ath12k and iwlwifi), sound (ALSA), power management on AMD, and file system improvements (OverlayFS, EROFS, XFS, NFS, SunRPC). Linux 6.16 is due for release at the end of July and will then be picked up by Linux distributions, which will be the first interaction most end users have with the new features in this update. The main benefit of a newer kernel is that Linux will work on newer hardware, so if you’ve had issues with Linux, be sure to try it periodically in case your hardware is now supported.
    • Technically, it should be account-bound after activating it
  • Recent Achievements

    • Week One Done
      urbanmopdubai1 earned a badge
      Week One Done
    • One Month Later
      Jim Dugan earned a badge
      One Month Later
    • 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
  • Popular Contributors

    1. 1
      +primortal
      645
    2. 2
      Michael Scrip
      226
    3. 3
      ATLien_0
      219
    4. 4
      Steven P.
      150
    5. 5
      Xenon
      146
  • Tell a friend

    Love Neowin? Tell a friend!