• 0

Need help with 100% height float element


Question

Hey all. Right now I am trying to get the left navigation button to be a height of 100% because this will be my mobile CSS sheet.

I want it to go all the way down the white element that it is in.

The pink background color is there to help me see what's going on.

I'm using Firefox's web dev. inspector and it seems the #left-col is not height 100%, which means I won't be able to get the #prev-button-i to be height 100%, which is what I need.

My thought is maybe this is caused by the float? Maybe it really is at height 100% but it's just displayed differently because of the left float?

The site with the issue

http://alllols.com/index3.php

http://alllols.com/stylem.css

The main site with no issue (maybe it's useful?)

http://alllols.com/index.php

http://alllols.com/style.css

If anyone is curious, I just made this site for fun to learn PHP and MySQL :)

16 answers to this question

Recommended Posts

  • 0
  On 31/05/2013 at 01:37, AWKM said:

Hard to figure out what is up because you seem to have height:100% on just about everything

Thank god I'm not the only one.

Could it be because, if when there is no float, it is at 100% height. So when it's floating, it is at 100%, we just perceive it to not be at 100% height?

  • 0
  On 31/05/2013 at 02:05, thatguyandrew1992 said:

Thank god I'm not the only one.

Could it be because, if when there is no float, it is at 100% height. So when it's floating, it is at 100%, we just perceive it to not be at 100% height?

if you didn't abuse 100% height like this the height of all the elements should have been based on the content and there shouldn't have been any bug at all :p

Also don't use float on every single element either, float is usseless when there is no element next to it, and use other position types then static(default) if neccessary (absolute, relative, fixed).

  • 0
  On 31/05/2013 at 05:37, Seahorsepip said:

if you didn't abuse 100% height like this the height of all the elements should have been based on the content and there shouldn't have been any bug at all :p

Also don't use float on every single element either, float is usseless when there is no element next to it, and use other position types then static(default) if neccessary (absolute, relative, fixed).

Can you be more specific? I need that button to be 100% height because resolutions change. What am I supposed to do?

  • 0
  On 31/05/2013 at 05:52, thatguyandrew1992 said:

Can you be more specific? I need that button to be 100% height because resolutions change. What am I supposed to do?

you mean the next and previous buttons right?

if so, try using fixed or absolute:


.nextbutton {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 30px;
}
[/CODE]

  • 0

I don't want to sound rude but that's some nasty code here. I don't even know where to start. Maybe reading a book on css would be a good idea ...

prev-button-a cannot go all the way down the element it is in because there's a br after it. You should apply display:block to prev-button-a since you have a block level element inside it. Never put a block level element inside an inline element. The height 100% to prev-button-i will never ever do anything for 2 reasons. Its parent is an inline element (which doesn't support the height property). The height of an inline element is the height of the line (line-height). If you apply display:block to the parent of prev-button-i then it wont change anything cause the height of its parent (prev-button-a) is set to auto (ie the height of the content inside it which is min-height:100px).

<div id="left-col"> height is set to auto too. Like prev-button-a it will take the height of the content part of the normal page flow inside it. Its height will be 100px too if you remove the br (min-height:100px). Add to this the padding 60px at the top. Add to this the line-height of the br under it if you don't remove it. This element is floated. It is not part of the normal page flow. The reason <div id="left"> has an height is because of the central content (which is part of the normal page flow). As far as <div id="left-col"> goes its parent doesn't have any height other than min-height:220px.

Here's a quote from the css spec :

  Quote
percentage

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

So according to the css spec since the parent's height of <div id="left-col"> is not explicitely specified and <div id="col-left"> is floated then its height in % is then set to auto.

prev-button-i height is 100px because of min-height:100px. Remove this property and its height will then become 0px. You should try working with absolute positionning instead since absolu

  • 0

Here's something to help you start. It's not perfect by any mean since i did this really quickly in my break in about 10 min (with the previous post).

#left-col{
	width: 56px;
	height: 95%;
	position: absolute;
	left: 0px;
	top: 60px;
}

#prev-button-a{
	display: block;
	height: 100%;
}

#prev-button-i {
	height: 100%;
	width: 56px;
	background: url("./s_images/prev-button.png") no-repeat scroll 0% 0% rgb(255, 0, 255);
	min-height: 100px;
}

You should think about merging prev-button-i into prev-button-a. No reason to have both.

  • 0

It is indeed some messy css but rewriting it all might not be a option he would like to choose :p

That's why I posted the position absolute code, which should work no matter what the parent elements are like(ofcourse the parent elements shouldn't have position relative or fixed in that case)

  • 0
  On 31/05/2013 at 17:03, thatguyandrew1992 said:

Thanks guys, I will try this later today. And LaP, why is my CSS so bad looking? Is there anywhere online that could help me with this?

You can read the specification. It's a daunting task but if you are serious about web design i think it's something that needs to be done once.

http://www.w3.org/TR/2011/REC-CSS2-20110607/

If you find reading the specification boring then a book is probably your best option. But i actually think the specification is easy to read and well explained.

After that you can find a good blog to learn about the quicks. I'm french so the blogs i'm reading are mostly french but i'm sure you can find good ones in english too. Here's one of the blog i read once a week.

http://www.alsacreations.com/

If you want to start with html5 there's a good free online book.

http://diveintohtml5.info/

http://html5please.com/

You should take a look at responsive web design too specially if you are into mobile web site.

http://alistapart.com/article/responsive-web-design

  • 0
  On 31/05/2013 at 17:03, thatguyandrew1992 said:

Thanks guys, I will try this later today. And LaP, why is my CSS so bad looking? Is there anywhere online that could help me with this?

a large part is complexity. if you write the earlier rules only with what it ends up looking in mind without thinking forward (i.e. have a general plan of how you're laying everything out before writing any code) you often end up having to put in unnecessary properties to hack the result into what you want it to be. despite the name, too many cascades make it really difficult to work with because anyone troubleshooting can't tell head from toes.

  • 0
  On 31/05/2013 at 18:22, primexx said:

a large part is complexity. if you write the earlier rules only with what it ends up looking in mind without thinking forward (i.e. have a general plan of how you're laying everything out before writing any code) you often end up having to put in unnecessary properties to hack the result into what you want it to be. despite the name, too many cascades make it really difficult to work with because anyone troubleshooting can't tell head from toes.

This and the usual diseases called "classite" and "divite".

You don't have to put everything in a div with a class attached to it. When you have 5-6 levels deep of div it becomes as bad as using tables.

The web site is really simple yet the code is hard to read without a dom inspector.

Here's a good example :

&lt;div id="footer"&gt;&lt;div id="footer-text"&gt;&lt;span&gt; ? &lt;/span&gt;&lt;span&gt; ? &lt;/span&gt;&lt;span&gt; ? &lt;/span&gt;&lt;span&gt; ? &lt;/span&gt;&lt;span&gt; ? &lt;/span&gt;&lt;/div&gt;&lt;/div&gt;

There's no reason to have 2 divs here. The spans are also useless since all the text share the same visual style. The css of the span > a in this footer could be merged.

You should use meaningful tag as much as possible. a for link. p for paragraph. h for headers. etc etc etc

The div and span tags have no meaning. They do not inform the reader about the content. Ideally they should be used only when you need to group elements and apply a common visual style to them.

This topic is now closed to further replies.
  • Posts

    • Scientists explain how bigger does not mean better for electric vehicles during colds by Sayan Sen Image by Blomst via Pixabay A new study by Cornell University researchers, working with Tompkins Consolidated Area Transit (TCAT), has found that electric buses use a lot more energy in cold weather, especially in places like Ithaca, where the roads are hilly and winters can be harsh. TCAT started testing seven battery-electric buses (BEBs) in 2021 as part of a pilot program funded by a federal grant. Over two years, the buses ran on 41 different routes in Tompkins County.However,t the buses had issues during colder months, with lower driving range and performance. To understand why, researchers looked at real-world data and developed what they called “Optimal Temperature Zone” (OTZ) models—these models show how much energy the buses would have used in ideal temperatures between 16°C and 30°C. When temperatures dropped to between −4°C and 0°C, the buses used about 48.0% more energy, including both power used to drive and energy regenerated through braking, compared to OTZ predictions. Even in the wider range of −12°C to 10°C, energy use still jumped by 28.6%. Half of this extra energy went into heating the batteries themselves. These bus batteries work best at about 24°C, so when it’s cold, they need extra power to warm up before the bus can even get moving. The other major factor was the cabin’s heating system, especially on urban routes where doors open and close often, letting in cold air. “With an all-electric vehicle, the battery is the only onboard energy source,” said Max Zhang, senior author of the study and a professor at Cornell. “Everything has to come from it.” The study also found that regenerative braking—the process that lets the battery recharge a bit while the bus slows down—didn’t work as well in cold conditions. One reason is that these bus batteries are huge, about eight times bigger than typical electric car batteries, and it’s harder to keep the temperature even across all the battery cells. To improve the buses' performance in winter, the researchers suggested a few short-term fixes: parking them indoors to keep them warmer, charging batteries while they’re still warm, and reducing the length of time the doors stay open during stops. On a bigger scale, cities might need to rethink their transit infrastructure. That includes checking how many charging stations they have, whether buses can be kept in heated garages, and how to adjust routes and schedules. “You have to try to optimize the schedule of all of the buses and to consider the capability of your infrastructure – how many charging stations you have, and if you have your own garage,” said lead author and PhD student Jintao Gu. The team found that rural routes, which have fewer stops, use less extra energy in cold weather than urban ones. That could help transit agencies decide which routes are better for electric buses during colder months. “One of the lessons we’ve learned is that these buses should be designed for the whole country, including states with colder climates,” said Zhang. “But any lessons are good lessons. This helps us learn as a society and do better.” Source: Cornell University, ScienceDirect This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act of 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing
    • Appears to be 150W PSU (Core Ultra 9) so most power delivery ports wouldn't even support it.
    • I wasn't implying people should be forced to use a single launcher. I prefer user choice. If Windows includes a decent game launcher, great, people might choose to use it if they want to. If it sucks, no one will use it. I would be completely against anyone being forced in that direction, just like I am against being forced to use 3rd party launchers if I choose to use Steam.
    • Sounds good, but that'd require Microsoft to develop and API of some sort and then get all the developers to support it... but everyone knows that while others will support Microsoft, Microsoft won't support itself and will kill off the feature... again. Microsoft has tried this trick in Windows 9x era, they tried it with the games library in Vista, they tried a big push for Games for Windows Live, and then again in Windows 8 with the WPA apps via their mobile/windows phone eco system. Now they're trying it again, and it's lets not forget that this isn't a push to make PC gaming better. It's not. To do that they need to provide at least the same level of quality and feature set of Steam, otherwise why else are gamers going to not use Steam. Right now Xbox app and everything Microsoft centric around the PC gaming front is exclusively for their new Xbox brand push to make everything an Xbox. Your Toaster, your cat, your PC, your VR headset, everything is a Xbox and that'll last for this generation of Xbox now probably. Then, like Microsoft always has done and will do, they'll drop it like a hot potato and everyone will be left crying. Point in case, bringing Xbox games to the ROG handheld, their entire point of this... They're marketing it as if it's an Xbox console in a handheld, yet, it's not. There are going to be Xbox gamers who think, they'll be able to pickup their Xbox one games and play them on a handheld like Nintendo and Steam Deck users... except they're going to quickly find out that their Xbox game library is almost entirely missing or games they've already purchased on the Xbox need to be purchased again on the 'this is an Xbox' handheld.
  • 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
      637
    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!