• 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

    • who ever thought this looked good needs to rethink their design credentials.....
    • There's a few here upset Kamala Harris never got the Presidency! lol....
    • Yeah, he identified a whole lot of wasteful spending of US taxpayer money. What's wrong with that? Nothing, unless you had your fingers in the pie of course.
    • How to reduce the annoying Liquid Glass effects on iOS 26 by Aditya Tiwari Apple announced Liquid Glass at WWDC 2025 in all of its glory. It's a new glass-inspired design language from the iPhone-maker making its way to most of its software platforms, including iOS 26, iPadOS 26, macOS 26, tvOS 26, and watchOS 26. Apple markets Liquid Glass as a new translucent material that "behaves like glass in the real world. Its color is informed by surrounding content and intelligently adapts between light and dark environments." The Cupertino giant isn't wrong. The new glass-inspired design does bring a fresh coat of paint and some beautiful visuals to the iPhone and other Apple-made devices. However, as the dust from the mega arrival settles, people are starting to realize the current drawbacks of having too much glass on their device. There have been reports of users, including those at Neowin, experiencing readability issues, background separation issues, and trouble focusing on the content displayed on the screen due to its transparent nature. While these are small nuances on Apple's part that can be fixed without much hassle, it's degrading the initial experience of what the company calls its biggest visual upgrade since iOS 7. That said, there are some workarounds built into iOS 26 that will help you tone down the shortcomings. If you're running the iOS 25 Developer Beta 1 on your supported iPhone model, you can follow these steps to make things a little better: Go to the Settings app on your iPhone. Scroll down and tap on Accessibility > Display & Text Size. Next, you'll find two toggle options: Reduce Transparency and Increase Contrast. When you enable the Reduce Transparency toggle button, iOS 26 can "improve contrast by reducing transparency and blurs on some backgrounds to increase legibility." The other toggle, Increase Contrast, does what its name suggests. It can "increase color contrast between app foreground and background colors." Enabling each of these toggle buttons individually or simultaneously will have different effects on your iPhone's user interface. Control Center is being criticized for the extra transparency, making the UI look cluttered and difficult to focus. Here, the Reduce Transparency button adds a darker background to make the Control Center UI elements stand out. Liquid Glass transparency issues are also prevalent in the Notification Center and the navigation controls of various apps. In the image above, see how the text of the navigation buttons has become unreadable or hard to focus on with certain backgrounds. It's challenging to determine what can trigger such behavior, as one can have countless color combinations on their device. In the image below, this is how these buttons look when both Reduce Transparency and Increase Contrast are enabled. It's still a hit or miss depending on what colors you are dealing with. Part of the blame also goes to the fact that iOS 26 is still an early beta, and the change doesn't render as intended every time. You can also notice the difference in the look and feel of the Control Center when reduced transparency is turned on. On a side note, you can add the Reduce Transparency and Increase Contrast buttons in the Control Center for quicker access. That said, let's wait to see what changes Apple will implement as it continues to gather feedback through the beta program. Hopefully, the software will become more stable when the first public beta of iOS 26 arrives sometime in July. Interested users can try out the latest iPhone update through the developer beta program, noting that early builds might come with unexpected bugs and issues.
    • Austin residents rally against Tesla's robotaxi launch by Hamid Ganji Tesla's plan to launch its robotaxi service in Austin, Texas, has sparked protests in the city. While the EV maker targets June 22 as the launch date, local residents are raising their voices against the plan due to political disagreements and safety concerns. As reported by CNBC, public safety advocates and political protesters are organizing protests against Tesla's robotaxi launch in Austin. Members of the Dawn Project, Tesla Takedown, and Resist Austin have cited safety issues with Tesla's automated driving systems. Meanwhile, Elon Musk's involvement in Donald Trump's administration and his work in the Department of Government Efficiency (DOGE) has prompted another group of people to join the Austin protests against Tesla. To show Austin citizens the safety problems of Tesla's self-driving system, The Dawn Project brought a Tesla Model Y to the protest, equipped with the company's Full Self-Driving (FSD) software (version 13.2.9). In the demonstration, the Model Y with FSD software reportedly zoomed past a school bus with a stop sign held out and ran over a child-sized mannequin placed in front of the car. The FSD package includes automatic lane-keeping, steering, and parking. It is unclear to what extent this test was conducted under standard conditions or what Tesla's defense is. However, multiple cases of Tesla FSD software malfunction in the past have resulted in collisions or severe accidents, according to data collected by National Highway Traffic Safety Administration. Interestingly, The Dawn Project CEO Dan O'Dowd is the CEO of another company that sells embedded safety and security solutions to carmakers like Ford and Toyota. It remains to be seen whether Tesla could launch a robotaxi service in Austin despite the residents' protests. Earlier this week, Elon Musk demonstrated the new version of Tesla's FSD software in a post on X. Musk's decisions on DOGE fuel public backlash against Tesla. While Musk left the Trump administration after a beef with the president, he's still a target of public criticism, which directly imapcts Tesla. As a result, the slow sales have even caused Tesla to sell its Cybertruck with 0 percent APR to boost sales.
  • Recent Achievements

    • One Month Later
      greege earned a badge
      One Month Later
    • Week One Done
      greege earned a badge
      Week One Done
    • Week One Done
      LagFighterZ earned a badge
      Week One Done
    • First Post
      ThatGuyOnline earned a badge
      First Post
    • One Month Later
      5i3zi1 earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      547
    2. 2
      ATLien_0
      230
    3. 3
      +FloatingFatMan
      166
    4. 4
      Michael Scrip
      119
    5. 5
      +Edouard
      91
  • Tell a friend

    Love Neowin? Tell a friend!