Two divs, one floating left, one right.
The first contains text (which is static) and has no fixed width, the other has a fixed width.
Is there a way to make the widths sum up to a certain value (eg. width of a containing div)? Preferably a CSS only solution.
The problem is different browsers give the text slightly different sizes, so the first div varies in its width. Setting a fixed width to the first div breaks it in the browsers which would have it longer. I can make it the longest I find, but I might have missed a browser, or the issue might return with a newer version.
fiddle: http://jsfiddle.net/jnfsmile/JcfGN/3/embedded/result/
(In chrome there is a gap between the divs, in IE 10 they overlap. I would like them to meet nicely)
Addition:
The same problem with height has been solved using line-height. Is there something parallel to line-width?
Related
Firstly, sorry about the mouthful that is the title.
I'm trying to make a responsive navigation with fluid container and different sized items. I need to know if it's possible (if so how) to keep the spacing between the items the same size for all items while keeping the first and last items flush to the edge of the container.
The red illustrates the spacing, which should be the same between all elements
I can do something like the above with a fixed width pretty easily, but as soon as the window is resized, I can't seem to get the gaps to grow/shrink to the right size.
Percentage margins would seem to be the answer to this but because the container can resize but the items inside cannot, the items either spread onto the next line if the window is too small or not reach the end of the line if the window is too big. I've also tried making the elements a fixed width and then text-align:center; but the spacing not what the designers want.
Has to be compatible with all of the modern browsers and IE 7+
Here's a (badly made) fiddle: http://jsfiddle.net/GGwdW/
Check this solution, might be helpfull: "text-align: justify;" inline-block elements properly?
For old IE's there's text-align-last property.
I have a layout with two main divs. The width of each div is 45%. Yet when I inspect the divs at different page widths the the divs are usually one pixel different from each other. 639 vs 640. I don't really care about this, the only problem is that items inside the smaller div aren't lining up properly with other items. It only happens at certain page widths but it is broken more than it is correct. It seems the elements in the larger div line up at any window size and the smaller div is almost always wrong, but is correct at some sizes.
What is going on here, is there a way to force the smaller div to act like the larger div?
This is a bug/sub-pixel issue.
I've asked a similar question a while back and found out that webkit-based browsers have a rounding issue when it comes to percentages.
Here's the link that bookcasey shared with me to answer my question.
Widths must be in integer amounts.
What is 45% of 955? 429.75px. Can't have that. So one of them has to be wider than the other.
Don't use percentages, and if you do, make sure the total width adds to a bit below 100%. I've always run into overflow and misalignment issues when using 100%.
I'm assuming you have another div that takes up the remaining 10%. So, perhaps try 44% on both.
I have a table with 5 columns, 2 of which have a set width, the other three don't. Different browsers interpret this inconsistently.
Have a look at this fiddle in different browsers to see what I mean.
Firefox and IE9 render it the way I'd think correct: all cells have uniform width of 20% (two have a set width of 20% each, and the remaining 60% is divided between the remaining three cells).
Chrome, Opera, IE7 and IE8 force the empty cells without a set width to have zero width, which in turn forces the other two cells to stretch to 50% width each. Putting content into one of the three empty cells makes them take all available width (60% in case one cell has content, 30% if two, etc.). Likewise, removing the content off one of the two cells that have a set width results in a forced 0 width.
Which browsers got it right and which ones are doing it wrong?
Also, I perused the W3C spec regarding tables, but only found the description of the empty-cells property, which is supposed to control the rendering of empty cells with borders/background, but this does not affect the cells' width. I thought the table-layout property might do the trick, but while setting table-layout:fixed in Chrome does make all the columns appear, there is no way (or at least I don't see one) to do the opposite in Firefox. If you could elaborate on this and/or point me to the correct section of the W3C spec that covers this, I would really appreciate it.
The problem arises as the W3C haven't seemed to cover it yet, they haven't suggested any "right" way of dealing with this situation. The browsers have the liberty to interpret it the way they wish, in my opinion is the way IE9 and Firefox do it.
IMHO all the browsers are displaying things RIGHT. As a developer we should understand that what we expect from the empty cells. It is always better to define width or add some spaces even if your cell is going to be empty to achieve consistent display across all browsers.
put inside the "empty" <td>
I'm having a slight problem. Whenever I hover over the "SEO" option on my navigation in IE, the navigation breaks & moves to the side. This doesn't happen in Firefox. Changing the navigation to position:absolute fixes it, but then the main content becomes merged with the navigation. It all validates. Any help would be much appreciated!
http://www.joemarketeer.com
http://jsfiddle.net/eoJ1/Ra4tR/
Thanks loads!
The navleft and navright divs are resizing independently, which is to be expected given your design structure. But it looks weird as it comes down on top of the content below:
One suggestion I can give you is not to set the navigation bar width in %, which you have done for these two divs. If you set a fixed width (in px) or remove the width specification completely (in which case it will take the width of its inner content), a horizontal scrollbar will appear below the page when the width is small, which I suppose is fine. Also, use as few floats as possible as they break the flow of content in the document and are more prone to breaking layouts. Both these divs have a float:left, which can be dumped for more stable solutions. I'm saying all this because I think the breaking of the layout on hover is occurring due to these reasons. If you can take care of this, your problem might disappear.
So my suggestion is to have a single nav div with width: 100%. Inside this put two divs: navleft and navright with display:inline and widths a.) specified in px or not at all, or b.) specified in % but with some min-width in px. If you don't specify any width for navright, it will expand to fill all of the space on the right.
This way these two divs will not reflow independently.
Basically, toy around more until you get better command over CSS; I think more experience will automatically help you sort out issues like this.
I've got three columns inside of a div that is the full page width. The two on either side are 25% width and the one in the center is 50% width. This layout is working fine except in IE6 where at certain page widths it bumps the right column to the next line. Is there a fix for this? Maybe an alternate way to layout a page like this?
Edit: I'm using a cross browser inline-block hack that works great in FF, IE, S, Chrome. I'm pretty sure this quirk has to do with the way IE calculates widths on fluid content, and happens due to miscalculation (rounding maybe?). I've put up an example here. Try slowly adjusting the window width in IE6 (maybe later versions too) and watch as the green DIV gets bumped down at certain widths.
Thanks,
Brendan
It's a rounding problem in IE6's box model. Generally, you can't have a combination equal 100%. Try making your values sum to 99% of total width, and it should work fine. This solution has always worked for me.
It sounds like a piece of content in that column might have a defined width which is more than what the 25% of page width it is given. Can you provide CSS examples?
EDIT: IE6 does not support inline-block which could also be the issue.
EDIT 2: I looked at it on a 1680x1050 screen in IE6 in a virtual machine. When I drag the width slowly over time from about 800px to 1600px, it randomly moves the right column around. I suspect it's an issue with the hack that you're trying to use. Your code is so simple that I think you should consider researching an alternate hack instead. I've also never seen the *<property>: <value> hack. What's the * do, all compliant browsers?