• 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

    • Sorry for having to do sponsored deals in order to keep the lights on. Our Stackcommerce partner determines the deals we publish (I do not choose them myself) but I suppose what people don't see or worry about doesn't affect them. If a tiny percentage of these articles (1 Neowin Deal a day) affects you this much, then I am sorry. We're not the only news site to have to do this btw others have to as well
    • My guess. Much like the original Siri, Apple never intended to innovate in the AI space. I bet their whole plan was to buy some up-and-coming AI company, slap their logo on it, and make it proprietary. But they either waited too late, or couldn't find a company willing to accept their low ball offer. Now they're forced to do it but they will be kicking and screaming the whole time. IMO, they will eventually purchase a company, slap their logo on it, and use their tier 1 marketing department to leap frog the competition.
    • The best wireless controller for PC is now even more affordable by Taras Buria I recently reviewed the GameSir Super Nova wireless controller for PC and mobile devices, and I came to the conclusion that this gamepad is one of the best in the business, as long as you do not play on consoles. It is affordable, well-made, and insanely customizable. Besides, you get durable Hall Effect sticks and triggers, a dock station that works as a USB hub, and a 1000Hz polling rate. Best part? The Super Nova is now even more affordable than before, with a 25% discount on Amazon. The GameSir Super Nova is available in two colors: Blue and Pink. However, you can remove the front plate and replace it with another one, like Purple. What I like about this gamepad is that it delivers the complete package: good-quality craftsmanship, solid materials, customizable RGB lights, a solid multi-device connection, and very deep customization via the GameSir app on Windows and mobile devices. It also has a gyro that works with all supported devices, not just the Nintendo Switch. The Super Nova is a no-go only for those playing games on Xbox or PlayStation. The controller is not compatible with consoles, but other than that, this gamepad is hard to beat at just $44.99. Not only is it cheaper than the standard Xbox Wireless Controller, but it also offers fantastic value for the money and a rich feature set. GameSir Super Nova Wireless Controller for PC and mobile - $44.99 | 25% off on Amazon US 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.
    • How to change folder colors in OneDrive by Taras Buria Microsoft's OneDrive cloud storage has plenty of useful productivity features that help you get around your file libraries. Colored folders are a relatively new feature that not every OneDrive user is aware of. While the ability to have colorful folders might seem minor at first glance, it can be very helpful for sorting stuff in your OneDrive. Microsoft says the feature lets users "personalize and manage folder colors for better content visibility." Even Apple agrees with this—iOS, iPadOS, and macOS 26 let you change folder colors in the Files/Finder app. Change folder color in OneDrive on Windows The process is very simple, but it is not the same as changing a folder icon in File Explorer. While you can change the icon of any folder in OneDrive on Windows 11 (Right Click > Properties > Customize > Change Icon), these icons do not sync across platforms. At the same time, while OneDrive folder colors do sync, the feature is not available for personal accounts in the web version of OneDrive. As for mobile devices, it is coming soon to Android and iOS OneDrive clients. Despite the current limitations, here is how to change folder colors in OneDrive on Windows: Make sure OneDrive is set up and running and sync is not paused. Find the folder whose color you want to change, and right-click it. Select OneDrive > Folder Color. Pick one of the 16 colors available and click Ok. The OneDrive app will sync your changes so that they appear across all devices that support folder colors in OneDrive. If you have a business account, you can open OneDrive for the web, right-click any folder and select Folder Color. Changes will sync across your devices right away. Do you find colored folders in OneDrive useful? Share your thoughts in the comments.
    • Awesome. That's what I was thinking Jim. Yea from what I can tell you connect the AIC card to the AIC header on the motherboard, so it doesn't just run through the PCI lanes. That's fine guys. Thanks for clarifying 🙂 I was getting a little bit lost with all of this, but I need a minimum of TB3 and the connector on the MB has it, but not on the back of my PC chassis / MB IO shield. Anyway I found that the cheapest I can get it is Amazon at 70 quid, so I'm just gonna have to fork out for it. Thanks everyone. 🙂 👍  Don't worry about Mindovermaster. He's just his chirpy cheerful self lol. Thanks everyone 🙂
  • Recent Achievements

    • Reacting Well
      rshit earned a badge
      Reacting Well
    • Reacting Well
      Alan- earned a badge
      Reacting Well
    • Week One Done
      IAMFLUXX earned a badge
      Week One Done
    • One Month Later
      Æhund earned a badge
      One Month Later
    • One Month Later
      CoolRaoul earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      535
    2. 2
      ATLien_0
      269
    3. 3
      +FloatingFatMan
      211
    4. 4
      +Edouard
      204
    5. 5
      snowy owl
      140
  • Tell a friend

    Love Neowin? Tell a friend!