Firefox overflow with the right edge? - html

There seems to be a bug in firefox where if I put anything on the right edge of a container (using text-align or float) it makes the container larger than it should be.
So for example -
<div style='width:100px; overflow:auto'>
<div style='width:50px; float:left;'>Something</div>
<div style='width:50px; float:right;'>
<h1 style='text-align:right;'>Title</h1>
</div>
</div>
Creates a scroll bar in firefox, seems to work fine in chrome. Any ideas?

What you're seeing is that the text actually overflows its container, because the painted dimensions of text can be bigger than its layout dimensions. This is particularly visible with italic text, but can happen with any text, especially with subpixel layout and antialiasing.
Chrome doesn't do subpixel layout of any sort, so it's just ignoring the overflowing text.
Your simplest bet is to just style your right float as overflow:hidden.

When i am doing aligenment with objects i do
<div style='width:100px; overflow:auto'>
<div style='width:50px; float:left;'>Something</div>
<div style='width:49px; float:right;'>
<h1 style='text-align:right;'>Title</h1>
</div>
this prob will not help you but i have to do it alot when useing %'s

Sorry reread you question you can remove the scroll bar like this:
<div style='width:100px; overflow:hidden'>
<div style='width:50px; float:left;'>Something</div>
<div style='width:50px; float:right;'>
<h1 style='text-align:right;'>Title</h1>
</div>
</div>
you will lose 1px of content thou

It's behaving as it should. You don't state which versions of Firefox and Chrome you're using, but for me with FF 9.0 and Chrome 16, they behave the same, i.e., the scrollbar appears. It's because your content extends beyond the defined width, and the default value for overflow is "visible", so the h1 in your right-floated div is extending beyond the div's boundaries. If you change your h1 to, say, a p tag, you note that the scrollbar disappears.
Applying a border will illustrate what's happening with the box model (copy/paste to see how the content extends beyond the border):
<div style='width:104px; overflow:auto;'>
<div style='width:50px; float:left; border:1px solid red;'>Something</div>
<div style='width:50px; float:right; border:1px solid red;'>
<h1 style='text-align:right;'>Title</h1>
</div>
</div>
So, again, it's behaving as it should. If your content extends beyond its container's width and no overflow value is assigned, overflow defaults to visible and the content shows and "pushes" the boundaries of the container. In this case, since your outer container has overflow:auto, you see a scrollbar.

Related

Divs Overlapping: How to push one with position:absolute under the other when they overlap

I have two divs (the left one is an image) inside a wrapper that are meant to be next to each other, the div on the right being positioned absolute with right:0 and bottom:0 so it positions to the bottom of the div image on its left. The issue is, when the screen gets small enough the position absolute one overlaps the image. I have added a div that just occupies space in the wrapper and I've avoided the overlap, but now when you make the screen smaller the div goes under the image but it doesn't reposition itself right underneath; it shifts to the right. Here is an example on JSfiddle:
http://jsfiddle.net/xbdsq7zj/
Here is the html:
<div class='ideaside'>
<div class='ideaphoto'>
<img src='http://www.devsourcecodex.com/images/advertisingexamples/200x200.png'></img>
</div>
<div style="float:left; width:150px; height: 120px;"> </div>
<div class='ideainfo'>
<p clas='glyphicon glyphicon-star unclickable'></p>
<span>Followers</span></p>
<p><strong>
Phase 1
</strong></p>
<p>By <%= render #idea.user %></p>
<i>2 hours ago </i>
</div>
</div>
<br>
<p class='doc'>
<b>Brief:</b>
t's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
</p>
Here is the css:
.ideaphoto {
float:left;
}
.ideainfo {
position:absolute;
bottom:0;
right:0;
}
.ideaside {
position:relative;
overflow:hidden;
}
I'd like it to go to reposition so that it is directly under the image rather than next to some whitespace under the image. Is that possible without using Jquery collision detection?
Thanks.
Edit: I am using Bootstrap, and this is all taking place in col-md-4. The image is always 200px, but the text div's width is sort of variable depending on the user's name.
I think bootstrap's function, (assuming your using bootstrap for this because of the glyphicon) will be of use to you. You don't have to use float anymore because bootstrap will do it for you.
<div class="row">
<div class="col-md-6 col-sm-12 ideaphoto"> <!--If viewport is regular it will take up half of the page. But if viewport is smaller it will consume a row, thus repositioning the .ideainfo below it.-->
<!--Enter your Image code here.-->
</div>
<div class="col-md-6 col-sm-12 ideainfo">
<!--Enter your IdeaInfo here.-->
</div>
</div>

Aligning responsive divs

I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>

Right align element while a horisontal scrollbar is present

I have a page where I want an element to align right at the same time I have elements which may be wide and cause a horisontal scrollbar. For instance:
<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</body>
This works fine if the wide element fits within the browser window. But if the browser window is too small so that a horisontal scrollbar appears the "stay right" element will align with the window and not the page:
If I move the scrollbar the "stay right" element moves and doesn't really align to anything.
If a add a table around the whole page it does what I wan't:
<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>
The "stay right" element will align with the right side of the wide child element regardless of browser window size.
Edit: The table based solution above will align right to largest of the width of the wide child element or the window width. Effectively this gives the page a "minimum width" which is determined by the contents of the page (ie. the wide child element). This is what I want - which isn't clear from the original text, sorry.
I am wondering if there is a better way than wrapping the entire page in a table.
That is a very interesting problem. It actually happens because the computed width on div matches the window size (and body size) instead of the width of the text. The floating text looks to it's container for a width/height when rendering (and because that computed value is actually size of the window, the float stops at the edge of the window).
This does not really occur often because most sites use something like grid960/foundation/etc and a min/max width are provided (you probably figured out that setting a width will fix your problem).
I don't know of a really good solution for dynamically sized text (with only css)... The only thing I can think of without using a table would be to use a clearfix. It is really used/created for element with floating children (in order to give them a correct width/height.. floating elements do not normally effect the containers dimensions) but it also will work in this case.
<body>
<div class="clearfix">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
EDIT: I lied, I came up with a second (better) way but it does require a more modern browser. It is to use a wrapper with a display: inline-block OR display: table. It really is just a sub-set of the clearfix but will work if you can get away with being IE8+ based.
<body>
<div style="display:inline-block">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
NEVER wrap an entire page in a table. It messes up your HTML since about the year 2000.
I think you want a fixed position for your div, it lines up the element with the window instead of the page:
.myDivThatFloatsRight {
position: fixed;
top: 10px;
right: 10px;
}

Strange IE7 bug with hr width in a floated div

I ran into this very strange "bug" with IE7, I have many div.column floated left, no width specified. The strange thing is that in IE7 the hr element width seems to take up 100% width of the container of these columns. And also the css rules for hr do not seem to be applied nicely, the background img looks very weird, border doesnt seem to be removed:
hr.style3{background:url(../images/backgrounds/hr1.gif) repeat-x;border: 0 none;height:3px;margin:15px 0;}
<div class="column last">
<div class="title">Useful info</div>
<hr class="style3" />
<ul class="links line_height3">
<li>
sample link
</li>
</ul>
</div>
tw16 suggested http://borgar.net/s/2007/01/style-hr-elements/ which is a very cool technique, however for some reason I could not make it work for my particular case, perhaps I missed something.
Anyhow, I opted to use a div instead, but to make it behave similar to hr I wrap this div around a display:none hr:
css:
.hr hr {
display:none
}
html:
<div class="hr"><hr /></div>
However, if your div.hr is inside a floated container (which, in my case, is also in another floated container), then you may have to assign a fixed width for it (only for IE7). I use modernizr plugin so I did something like this:
.ie7 .hr {width:100px}
With this method, you can:
Style the "hr" with background image etc easily, which should work cross browsers
Still keep the hr element where you want it so text readers and such can see it

CSS position:fixed and IE7

I have a few div boxes that are using position:fixed and I use a margin-top and margin-left in order to put them where I want them to be.
Everything works very well with FF/Chrome, but IE7 seems to fail at displaying these boxes at all.
I've googled it and I understand that only IE7 bet2+ knows how to display position:fixed items properly.
I'm looking for a solution that will allow these boxes to be displayed correctly on all IE7 browsers. Can anyone assist?
CODE: (The two divs in question are the ones with the inline styling)
<div id="rn_PageContent" class="rn_Home">
<rn:widget path="search/ProductCategoryList" data_type="categories" label_title="#rn:msg:FEATURED_SUPPORT_CATEGORIES_LBL#"/>
<div style="float:right;width:310px;background-color:#000;border-style:solid;border-width:1px;border-color:#999999;padding:5px;position:fixed;">
<h2 style="border-bottom:1px solid #BBBBBB;margin-bottom:10px;padding-bottom:2px;">Most popular questions</h2>
<rn:widget path="reports/Multiline2home" report_id="#rn:php:$report_id#" per_page="5" />
<rn:widget path="reports/Paginator" report_id="#rn:php:$report_id#"/>
</div>
<div style="float:right;width:310px;background-color:#000;border-color:#666;border-style:solid;border-width:1px;padding:5px;margin-top:10px;position:fixed;">
<rn:widget path="standard/knowledgebase/PreviousAnswers2" number="3" />
</div>
</div>
Thanks,
position: fixed elements are positioned with the properties left and top (or right and bottom) not with margin.