Ok, so I'm working on a prototype of my UI before I start coding the webapp. I got the design mostly done while working in Firefox and (of course) when I tested it in IE, there were a lot of rendering issues. One of those issues is that if I have a div that contains some text and another div that's set to float:right, that nested div shows up on the next line, below its parent div. This is the problem markup in its simplest form...
<div style="background-color:red;">
Text
<div style="background-color:yellow; float:right;">Right</div>
</div>
I scoured the internet for solutions and the only working relevant solution I found that makes this work in IE is to place the floating div at the beginning of its parent like this...
<div style="background-color:red;">
<div style="background-color:yellow; float:right;">Right</div>
Text
</div>
In reality, the nested div has a class and my CSS is floating that class. But what happens if I eventually make another stylesheet to target mobile devices and I no longer want that inner div to be floated? Then the content itself would be out of order in HTML, just for the sake of accommodating a CSS issue in IE. Is there a better way to solve this?
A colleague of mine recently had a very similar problem. I recommended simply using positioning rather than floating. I believe you could do the same here:
<div style="background-color:red; position:relative;">
Text
<div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>
I don't know if you have a requirement to use floats or not. Using the positioning method will cause the positioned element to not take up space in normal flow, but otherwise keep the correct source order and visually accomplish what I think you want to do.
Set a width value on your inner div and make it display: inline-block. Div's are block elements that take 100% width of the parent, that's why IE puts it on the next line.
I am not sure if it is a possibility for you, but putting the text within the outer div in a div of its own seems to solve the problem
<div style="background-color:red;">
<div style="float: left;">Text</div>
<div style="background-color:yellow; float:right;">Right</div>
</div>
I just hit this problem in IE7 - in my case, the item that was going to clear the float was going to be full width anyway. I just set that to "float: none;clear: left" and it seems to work.
Related
I'd be glad if you could help me with some positioning. Here is the website.
Problem is my footer. I can't make it show always below container (if text container goes below img). If text is short enough to not go below img its ok. I tried many solutions, but non of them seemed to work for me. Solution to this could be making slider div with background, but I can't use it because I want it to fit the screen (so I need to use <img> inside it.) Any help would be much appreciated. Long story short:
<div id="container">
<div class="slider"><img with background</div>
<div id="page absolute div">
content
</div>
</div>
<div id="footer"></div>
Another solution could be stretching "container" height when "page" div keeps getting bigger, but its not possible (from what I know) because its position is absolute.
[EDITED]
www[dot]fami[dot]nazwa.pl/cc/apro/wp-content/themes/apro/style.css
div id dol is footer
how website looks to me: http://i.stack.imgur.com/yjY2a.png
i want footer (div id dol) to be below that absolute div with content
I see nothing wrong with your page, so I don’t understand what you are trying to do. However, have you considered using floats and clearing with your footer?
using firefox to see the code and css, I can't find a 'footer'....?
I am trying to identify this bug. Is this a known issue already or is it totaly new? Is there a workaround (like a zoom:1 or position:relative that I can add to fix it?), idealy without modifying the html here but just adding to it.
If you display the below html in IE8 you will see the text from the select (combo box), is displayed twice. One outside of the combo box. This is messing up the flow of my document (not to mention looking weird).
<html><body>
<div style="width: 800px;">
<div style="float: right" >
</div>
<div style="display: none">
ijklmno
</div>
<div style="float:left">
<select>
<option>abcdef</option>
</select>
<div style="float: right">
</div>
</div>
</div>
</body></html>
This is definitely a bug, since you are pretty explicit in the layout style rules. But it's also a really weird arrangement to begin with. If you unhide the hidden div, add text OR hide the div below the select, the problem goes away. My best guess is that since you have overlapping block level elements with one hidden and one empty, IE is ignoring the float and trying to fit them on top of each other, which is forcing the option down, but since the select stays in place, its showing the option within the select as well.
Very strange and a very cool catch. Your options as I see them is to either add some content to the the last div (non-breaking space, probably) or hide the div (display: none), or both.
In Firefox, that last div is also not floating right and is overlapping with the select (you can tell by outlining block-level elements with the Developer Toolbar) which makes me think that Firefox is just better about handling overlapping block level elements.
If you set the last div to have a border, you'll see that it's not floating to the right of the main div.
ok this header image is driving me crazy-- ive cleaned up the divs and edited the css - before i learn positioning etc, id love to see a quick fix that just puts that image down at the bottom of the page
sorry, the question was in the title-- im trying to get the footer not to float on top of the page but ive gotten some responses about absolute positioning so ill try and work on that myself, additional answers still appreciated, thanks
http://we-live.in/the_sierra
<div style="text-align:center;">
<div id="footernav">
Home
About Us
Contact Us
</div>
Your main content div appears to be the div with the id "to_div". Your footer floats to the top because you've used position:absolute on to_div which takes it out of the flow. Either absolutely position your div on the bottom or stop using absolutely positioning. I recommend the latter.
That happens because you have set up to absolute the position of each div (to_text, nav_deals, etc.) but the div that contains the footer is rendered as a normal div element (because its position is not absolute)!
I suggest to redo this simple layout without the absolute positioning! Or you can solve by setting to absolute even the position of the last div!
The problem is that you are using absolutes. Absolutes do not affect the flow (in other words for the positioning of other elements it's as if they don't exist).
Do something like this (I've put the css as text)
<div id="wrapper">
<div id = "main">
<div id="to">FLOAT:LEFT</div>
<div id="from">FLOAT:RIGHT</div>
<p class="extro">CLEAR:BOTH</p>
</div>
<div id="footer"></div>
</div>
I have gone through a long tutorial on W3Schooles to learn CSS; I learnt some basics but still miss my primary aim: Positioning DIVs
This is what I'm trying to do
*---------*---------*
* * *
* * *
*---------*---------*
My goal is simple and trivial for some, but I'm having headaches doing this the right way, in fact I did it but it has lot of problems when I add more text to the DIVs or they simply merge with another DIVs
What I did is simply play with margin and padding values using FireBug. All I need now is to learn me this simple (I hope) trick, what I'm missing is: how this simple positioning works? Shall I use absolute, relative positioning? Change the margin, the padding, the size??
If you have a good tutorial explaining this point, so please point it. I had other headaches looking for that on Google.
It looks like you are trying to float two columns next to each other. This is fairly simple and covered in depth here :
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
I tend to stay away from the position property unless I have to overlay some elements.
Creating a 2 column layout in CSS
Personally, I don't like using a clear:both on a br tag.
Use overflow: auto on the parent div instead
<div class="container" style="overflow: auto">
<div style="width:300px;float:left"><p>left column</p></div>
<div style="width:300px;float:left"><p>right column</p></div>
</div>
I've had good luck emulating the code found in the 960 grid system.
The right way is hard because many things aren't really cross browser compatible. Browsers are getting better, but its still a nightmare if you have to use anything IE compatible. (lots of hacks)
With absolute positioning you can absolutely place any of your div's. the drawback being that they are stuck in those positions no matter the resolution or the size of the window displaying your page.
What you could do is float your left column to the left, and then not specify floating on the right column. Keep the default positioning by not specifying absolute nor relative, then just adjust the widths of the elements as needed.
If you are okay with setting specific widths on your divs, the following has worked well for me:
<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>
The "float: left" makes the columns line up side-by-side. The last div (with the clear: both) makes it so that anything you put after the columns stays below the columns. This way, you can change the width of either column without messing with the styling of the other.
<div class="container">
<div style="width:300px;float:left"><p>left column</p></div>
<div style="width:300px;float:left"><p>right column</p></div>
<br style="clear:both" />
</div>
When I specify a height in the style for any element inside of this, IE makes the entire thing 100% width, rather than keeping it "autosized" for width.
Other browsers display it fine, but not IE. How do I fix this?
<div style="position:absolute;top:50px;left:50px;background:green;">
<div>
<div>test</div>
<div style="height: 20px;">this makes it 100% width in IE. why?</div>
</div>
</div>
Thanks!
Here's something that may work for you. It's a little hacky, but if you're trying to find a good width for some text, this is the only way besides javascript that I know of. We're basically forcing the width by not allowing the line to break. You can put in <br/>s if you need line breaks.
<div style="position:absolute;top:50px;left:50px;background:green;width:0px">
<div>
<div>test</div>
<div style="height:50px; white-space:nowrap">This is normally sized in IE6</div>
</div>
</div>
On second thought, don't check out the link. It's old and doesn't work as advertised.
Old answer:
http://snippets.dzone.com/posts/show/216
I believe that non-absolutely positioned DIVs automatically expand to fill their container horizontally. Since you haven't specified any container size for this div, it expands to fill the whole page.
I find it odd that Firefox doesn't expand the div... I'm not sure which of them actually has it "right".
At a guess, I would say it's something to do with the hasLayout bug in IE6. My suggestions:
1. Give the containing div (the one with the absolute positioning) a set width.
2. Post an example of what you are trying to achieve. We might be able to suggest a more all-browser friendly way of doing what you want.