• 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

    • You are missing the point, we should not have to do that. Should have a do you want an MS account option on the normal sign in.
    • Hynix 2TB Platinum P41 NVMe Gen4 2280 SSD is back at a mouth-watering price by Sayan Sen If you are in the market for an SSD, especially an M.2 2280 NVMe drive, then take a look at the Platinum P41 from SK hynix, which is currently back to its lowest price in the last six or so months (purchase link down below). This is a Gen4 SSD that promises sequential reads and writes of up to 7000MB/s and 6500MB/s, respectively. Meanwhile, the sequential read and write speeds are rated at up to 1400K IOPS and 1300K IOPS, respectively. The 2TB variant of the P41 features a 2GB DDR4 DRAM cache as well, which is meant to improve write caching and random access times with quicker metadata look-ups. Hynix says that the drive can operate at temperatures of up to 70 °C and thus you should opt for a heatsink if you intend to do data transfers for longer periods at a time. That should not be a problem, as the P41 Platinum is based on 176-layer TLC NAND and has a rated endurance of up to 1200 TBW (terabytes written) for 2TB. Make sure to update the firmware for the Platinum P41, as it fixes a throttling issue wherein the SSD would drop speeds after being used for several months (via Lower-Tone-3503 on Reddit). SSD firmware updates can often resolve critical problems, like in the case of WD/SanDisk SSDs, for example, which are still blocking Windows 11 24H2 due to inappropriate firmware. Get the SK hynix P41 at the link below: SK hynix Platinum P41 M.2 2280 NVMe SSD without heatsink: $129.99 + $10 off w/ promo code SACET23323, limited offer => $119.99 (Newegg US) You can also check out the other SSD deals we have covered in these articles here. This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • Until EVs get solid state batteries that can last 800miles+ on a single charge in Canada's -50°C weather, all while functioning 100% offline, they're still just at a guineapig testing stage IMO, and simply not worth purchasing...
    • I would question if Neowin really needs science research studies/stories than.
    • Microsoft reveals Mu, an on-device small language model built into Windows 11 by Pradeep Viswanathan Last year, Microsoft revealed Copilot+ PCs featuring a dedicated Neural Processing Unit (NPU) capable of over 40 TOPS or more. These Copilot+ PCs came with Phi-Silica, an on-device SLM to bring language intelligence capabilities to Microsoft's own first-party apps and apps from other 3rd-party developers. Today, Microsoft revealed Mu, a new on-device small language model built into Windows 11. Microsoft's goal was to create an AI-powered agent within the Settings app that can understand a user's natural language queries and integrate it into the existing search box for a smooth user experience. Hence, Microsoft is using the new Mu model to power the new agent feature in the Settings app, which was made available to Windows Insiders recently in the Dev Channel with Copilot+ PCs. Like Phi-Silica, Mu is designed to operate efficiently on NPUs, delivering over 100 tokens per second while running locally. In the official blog post, Microsoft explained how they designed and trained the Mu language model. Here's an overview of the Mu language model: Mu is a 330M encoder-decoder language model. The encoder-decoder approach achieved about 47% lower first-token latency and 4.7× higher decoding speed compared to a decoder-only model of similar size. Mu uses weight sharing in certain components to reduce the total parameter count. Microsoft trained Mu using NVIDIA A100 GPUs on Azure Machine Learning. Mu is nearly comparable in performance to a similarly fine-tuned Phi-3.5-mini, despite being one-tenth of the size. The model is better suited for multi-word queries. So for short or partial-word inputs, the Settings app will continue to surface lexical and semantic search results in the search box. Interested users can download Windows 11 Build 26120.3964 (KB5058496) or higher to check out this new AI-powered agent in the Windows Settings app.
  • Recent Achievements

    • Dedicated
      tesla maxwell earned a badge
      Dedicated
    • Dedicated
      Camlann earned a badge
      Dedicated
    • Week One Done
      fredss earned a badge
      Week One Done
    • Dedicated
      fabioc earned a badge
      Dedicated
    • Week One Done
      GoForma earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      633
    2. 2
      Michael Scrip
      224
    3. 3
      ATLien_0
      219
    4. 4
      +FloatingFatMan
      142
    5. 5
      Xenon
      135
  • Tell a friend

    Love Neowin? Tell a friend!