• 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

    • AMD Ryzen 9600X 6-core AM5 CPU is just $185 and you get a free 512GB NVMe SSD too by Sayan Sen If you are on AMD's AM4 socket or older Intel and are looking to upgrade your processor, AMD has the Ryzen 9600X for just $185 (purchase link down below), plus you get a free NVMe SSD as well. The deal comes hot on the heels of Intel also offering the Core i5-14600K for as low as just $200, which includes a 240 mm AIO liquid cooler. Check that deal out in this article if you want to go Team Blue. The AMD Ryzen 9600X is based on the latest Zen 5 design and is the company's best chip to date. This desktop CPU has six cores and 12 threads; it competes with Intel's 12th Gen i7 for productivity performance, and is almost as good as the 14th Gen i7 for gaming. The SKU does not include a cooler and so you will need to buy one separately. The technical specifications of the Ryzen 5 9600X are given below: Architecture: Zen 5 Process Technology: TSMC 4nm FinFET manufacturing process Core Count: 6 cores Thread Count: 12 threads Base Clock Frequency: 3.9 GHz Max Boost Clock Frequency: 5.4 GHz Total Cache: 6 MB + 32 MB (L2 + L3) Thermal Design Power (TDP): 65W PCI Express Version: PCIe 5.0 28 lanes (usable: 24) Overclocking: Unlocked for overclocking TjMax: 95 C Platform Socket: AM5 Memory capacity support: max 192 GB DDR5 Memory Speed: 2x1R DDR5-5600, 2x2R DDR5-5600, 4x1R DDR5-3600, 4x2R DDR5-3600 Get it at the links below: AMD Ryzen 5 9600X (includes Radeon 2CU Integrated Graphics) - 100-100001405WOF: $184.99 (Shipped and Sold by Amazon US) | $189.99 (Shipped and Sold by Newegg US + free 512 GB NVMe SSD) 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.
    • Hello, The general things are to make sure you have all of the latest Windows Updates installed as well as various device drivers for the computer's hardware components (video card, storage devices, etc.), as these can make a difference.  It might be small differences, but they can add up.  Case in point:  I was reading a while back about how in Windows 11 when you right-click on an object in File Explorer to bring up the context menu, it first enables to 3-D acceleration… to display a menu with text and maybe some 2-D icons.  Such behavior slows down the display of the context menu slightly.  If (and/or when) this gets fixed in Windows 11, context menus in File Explorer will appear much snappier. A few things you can try, in no particular order: Try toggling the full screen view of File Explorer on and off by pressing the F11 key twice.  This fixes another (different) bug like the one I mentioned above with Windows.  I don't recall if it has been fixed yet. Open the File Explorer, and look at the Panes section.  Click on the Navigation Pane button, and uncheck all of the options you do not need, like Navigation Pane, Show all folders, Show This PC, Show Network and Show Libraries.  You can also deselect (uncheck) the Preview pane and Details pane. In the Layout section, change the viewing option to either List or Details. if you use the Quick Access section in the left pane of the File Explorer, unpin (remove) any mappings to network drives, plus anything else you do not need or regularly access.  If you do not use it at all, consider unpinning everything there. In the File Explorer, select File → Options to bring up the Folder Options dialog and make the following changes: On the General tab, set Open File Explorer to This PC and below it in the Privacy section, uncheck the various Show… options and click on the Clear button. On the View tab, check the Always show icons, never thumbnails and the Launch folder windows in a separate process options.  Also on the View tab, uncheck the Display file size information in folder tips, Display the full path in the title bar, Restore previous folder windows at logon, Show preview handlers in preview pane and all of the options in the Navigation pane section. On the Search tab, scroll down the the When searching non-indexed locations section, and uncheck all of the items. Go to Settings → Network & internet → Advanced network settings → Advanced sharing settings and select the Private networks section.  In there, set Network discovery to On, enable (check) Set up network connected devices automatically, and set File and printer sharing to On.  Do not make any changes to the Public networks or All networks sections. Go to Settings → Privacy & security → Searching Windows and in the Find my files section, select (check) the Classic option.   Under the Classic option, select the Customize search locations option.  The Indexing Options window will appear.  Click on the Modify button to show the Indexed Locations window.  Click on the Show all locations button.  In the Change selection locations section at the top, remove any entries that say ""This location is currently unavailable" in them. Go back to the Indexing Options window, and click on the Advanced button.  The Advanced Options window will appear.  On the Index Settings tab, click the Rebuild tab. Other things to consider:  If you upgraded from Windows 10 to Windows 11 and/or cloned your boot drive (from a HDD to a SSD or a SSD to another SSD), wiping it and performing a clean installation of Windows 11 may improve performance, as legacy settings from the older hardware will no longer be in place.  If you are still using a hard disk drive, upgrading to a solid state drive will provide a noticeable performance improvement to all operations that involve accessing the drive. You can also try using third-party replacements for the Start Menu (Start 11, StartAllBack, etc.) and/or Windows File Explorer (Directory Opus, Double Commander, Explorer++, Files, FAR, Free Commander, Midnight Commander, Q-Dir, Total Commander, XYplorer ,etc.) to see if those perform better for you than Windows stock versions.  I don't think changing the antivirus software would have any effect, but it is something you could try as well, just to see if it does make any difference. Regards, Aryeh Goretsky  
    • I think it's bloody great, old chap!
    • Not the deal that 2nd hand purchasers tend to look for - no.  It's cheaper than the sum of it's parts new - yes.  But people looking for 2nd hand, pre-built computers are rarely looking for what you are selling. Don't misunderstand; as an informed enthusiast I like that computer, and as an informed enthusiast I am often asked "My son wants a gaming PC and here's my budget" - in which case, as an informed enthusiast I would totally point them in this sort of direction.  But I am not the mass market, hence you may well have to wait longer for a sale. If you're looking for speed - then breaking it into parts is likely to pay off better on that front, as there will be more people who suit that market and their likelihood of buying 2nd hand is more fruitful.  But - chore!
  • Recent Achievements

    • Week One Done
      elsafaacompany earned a badge
      Week One Done
    • Week One Done
      Yianis earned a badge
      Week One Done
    • Veteran
      Travesty went up a rank
      Veteran
    • One Month Later
      somar86 earned a badge
      One Month Later
    • Week One Done
      somar86 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      506
    2. 2
      ATLien_0
      260
    3. 3
      +Edouard
      186
    4. 4
      +FloatingFatMan
      177
    5. 5
      snowy owl
      132
  • Tell a friend

    Love Neowin? Tell a friend!