• 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

    • A very under-rated game. Next level graphics with Path Tracing on beefy PC. I am definitely looking forward to this DLC.
    • I’m new to the Neowin forum and just wanted to introduce myself. I’ve always had an interest in tech — especially Windows, software updates, and gadgets. I’ve been reading posts here for a while, and it seemed like a good time to finally join in and be part of the conversation. Outside of tech, I enjoy music, movies, and keeping up with the latest news in the digital world. I’m hoping to learn from others, share a few tips of my own, and have some good discussions.
    • Hey! What a difference it makes to upgrade from an old WiFi 5 router to a new one. The Asus BE88U and BE92U are both very top picks. Asus gives you more control and better firmware support than most. Netgear’s new stuff is decent, but locked down. If you need more than 4 wired ports, I’d suggest a separate 2.5G or 10G switch. It makes life easier. Synology’s UI is clean too, but they don’t have a WiFi 7 router yet. If the price isn’t a big deal, go with Asus and pair it with a switch. Let us know what you think!  
    • Honestly, I think the long-term play here is for Microsoft to ditch the idea of a traditional console entirely and just turn Xbox into a full-on operating system. They (or anyone!) could release hardware like a Mac Mini or a typical console with built-in GPU and RAM, but instead of being locked into a console ecosystem, they run the Xbox OS. It makes total sense because it pushes Game Pass, Windows, and all their other software. The handheld angle is really interesting too. You’d basically have a portable PC. Hook up a keyboard and mouse, and suddenly you can edit videos or get some real work done while on the go. Something like a prebuilt Xbox PC would be more than just a gaming box. It could be a decent little PC that people might actually upgrade with each generation. And since it’s running a PC-based OS, you’d get all the usual perks like mod support, cheaper games across different stores, and no extra charges just to plug in a webcam or other standard accessories. Plus, if they let you install the OS on your own rig, then you’ve got full upgradability too. Best bit also being Microsoft wont even need to build them anyone can and when they do Microsoft just wins. The competition is kind of stuffed. Those maybe relying on SteamOS might be ok but will still have software support issues and no Game Pass. Sony and Nintendo can’t really offer the same kind of flexibility at all not sure how they will live on. They’d struggle to match something that works as a desktop OS, console, handheld, streaming box, and media hub, all with your game library ready to go, never needing to rebuy games. Console exclusives are the only way they can live I think, but if they ever get blocked by antitrust rulings down the line, it’s game over. I'm waiting to see the bloat that's still left on these and if they let you install on a regular old PC. Fingers crossed this could be the lightweight OS we have been asking for.
  • Recent Achievements

    • Conversation Starter
      NeoToad777 earned a badge
      Conversation Starter
    • Week One Done
      VicByrd earned a badge
      Week One Done
    • Reacting Well
      NeoToad777 earned a badge
      Reacting Well
    • Reacting Well
      eric79XXL earned a badge
      Reacting Well
    • First Post
      brynmot earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      480
    2. 2
      +FloatingFatMan
      277
    3. 3
      ATLien_0
      243
    4. 4
      snowy owl
      209
    5. 5
      Edouard
      188
  • Tell a friend

    Love Neowin? Tell a friend!