This one is really getting my goat. I need to float Container1 and Container 2 to the right and have them butt up against each other as they are now. I also need to float items inside Container2 to the right so they stack on each other. Problem is if I set anything inside Container2 (sample text 2, sample text 3) to float right it makes Container2 width 100% or something.
This could be solved by giving Container2 a specific width but that is not possible as all of this is dynamic content. I need Container2 to grow as i stack things inside it.
Is there any way around this? It is only a problem in ie7 all other browsers seem to be fine. This is driving me mad.
<div>
<div style="width: 100px; height: 100px; background: green; float: left;">
</div>
<div id="Container1" style="height: 100px; border: 1px solid #000000; float: right;">
sample text 1
</div>
<div id="Container2" style="height: 100px; border: 1px solid #000000; float: right;">
<div style="float: right; border: 1px solid #FF0000;">sample text 2</div>
<div style="float: right; border: 1px solid #00FF00;">sample text 3</div>
</div>
</div>
I couldn't find a fix to this bug in Internet Explorer 7.
There might be one, I don't know. I tried all the usual tricks.
Here's some reworked code utilising display: inline-block.
It looks identical to your old code in IE8, and is consistent in IE7/8 and other modern browsers. Yay!
See: http://jsfiddle.net/SUPhf/
There are a number of things to be aware of:
See these links to get a feel for display: inline-block:
Especially this: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
And also: http://www.brunildo.org/test/inline-block.html
I had to swap the order of elements in the source code to keep the visual display the same.
Whitespace in your HTML is significant when you're using display: inline-block.
Compare the fully fixed link above to this version, where the only change is extra whitespace:
http://jsfiddle.net/SUPhf/1/
Now that you're aware of those caveats, this should be fine.
Related
In a page, I have a container of fixed width which contains an inline-block element, followed by some text.
Sometimes, this text will be wider than the container. When this happens, I want it to break to the next line (as seen in the first example below).
Sometimes, this text will also be too wide to display within the container. When this happens, I want the excess to be truncated (overflow: hidden). However, when I try doing this the obvious way, a line break gets inserted after the inline-block element (as seen in the second example).
I can work around this by wrapping the inline-block element and the first letter of the text together in a <nobr> element (as seen in the third example -- or an equivalent white-space:nowrap wrapper), but this seems like a really ugly way of going about things. Is there a better way of doing this?
.container {
outline: 2px solid blue;
width: 150px;
overflow: hidden;
margin: 10px;
}
.inlineblock {
display: inline-block;
width: 30px; height: 1.5em; vertical-align: middle;
background: gray;
}
<div class="container">
<span class="inlineblock"></span>line breaks only at spaces
</div>
<div class="container">
<span class="inlineblock"></span>widetextwidetextwidetext second line
</div>
<div class="container">
<nobr><span class="inlineblock"></span>w</nobr>idetextwidetextwidetext ugly workaround
</div>
It looks like the first character doesn't need to be in the <nobr> element, so this will work:
<nobr><span class="inlineblock"></span></nobr>wide...
Still ugly, but definitely less ugly! It works on Firefox and Chrome at least.
I'm trying to do a layout with two top divs, and one below them. See here:
<div style="width: 49%; float: left; border: 1px solid">
<label>blabla</label>
</div>
<div style="width: 49%; float: left; border: 1px solid">
<label>blabla</label>
<br/>
<label>blabla</label>
</div>
<div style="width: 100%; float: left; border: 1px solid">
<label>blabla</label>
<label>blabla</label>
</div>
http://jsfiddle.net/DAYaM/
Problem is I would like the top left div (or right one) to resize to the same dimension as the other one, even if the number of elements are different. So basically to scale to the biggest one. Any suggestions?
Regards,
Bogdan
Here you go
I wrapped everything into a section, gave it a fixed width, and gave the first two div a width of 100%.
I also converted your inline styling to external, because inline is depreciated in HTML5.
Also, there is no need to use 49% for your width. If you add box-sizing:border-box, then everything will fit like you want it to.
I've been trying all day to get a container to display its content in the form of columns and expand towards the side instead of down when the number of children div's increases. I've tried everything from -vendor-box-orient layout to inline-block, nothing seems to be working. Here is the use case.
<div class="container">
<div class="row">
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
The .container is supposed to be overflow-x:scroll while .row is supposed to exceed .container if it has enough children to do so, instead of leaving overflow visible. So, how can I get .row to collapse to the width of its collective children as it would work if it was vertical?
Use case: JSfiddle
Looking at your fiddle demo, I found this answer by ThirtyDot (fiddle here) and adapted to do the same thing for right-flowing content to be right-fitted. I'm not entirely I got the scroll feature right, but let me know. This should work with elements other than UL and LI as well, but I haven't modified the markup to check yet.
Of course, this uses the weird and wonderful display: table- properties. Doing that, it was bound not to be supported by some legacy browser. See When Can I Use? for details on support.
I tested the following:
Firefox 13 - Works
Chrome Latest - Works
Opera 11.67 - Works
IE 8 - Works
IE 9 - Works
IE 7 - Does NOT Work
Safari - Untested
So if IE7 support is critical, this won't work for that browser at least. But unless I've misunderstood something, it works great in all the others.
Markup
<div>
<div class="super-scroller">
<ul class="horizontal-fit">
<li class="outer-block"><span class="inner-block"></span></li>
</ul>
</div>
</div>
CSS
.super-scroller {
border: 1px solid green;
overflow-x: scroll;
padding: 5px;
margin: 10px auto;
width: 90%;
}
.horizontal-fit {
display: table;
border: 1px solid blue;
}
.horizontal-fit .outer-block {
display: table-cell;
}
.horizontal-fit .inner-block {
display: block;
border: 1px solid red;
text-align: center;
margin: 5px;
width: 100px;
height: 100px;
}
http://jsfiddle.net/suJ3d/2/
Interactive demo:
http://jsfiddle.net/userdude/suJ3d/5/embedded/result/
Here's a working example. The red div's move inside the blue div.
The key was
overflow-x:scroll;
white-space: nowrap;
on the outer div and
display:inline-block;
on the inner div
http://jsfiddle.net/WTw2P/2/
<div class="sectiuni_home_box" style="width: 626px; padding-left: 0px;">
<div class="sectiuni_home_box_t" style="border-left: 0; width: 618px;">
<div class="sectiuni_home_box_v" style=" width: 616px;">
<div align="left" style="width: 1px; border: 0; border-left: 1px solid #c3c3c3; float:left; height: 100%; padding: 0; vertical-align: middle;"></div>
<div id="actiuni" name="actiuni">
<table style="border: 0;"></table>
<div id="lista_actiuni" name="lista_actiuni">
<div id="actiuni_scroll" class="scroll" style="width: 100%; height: 428px; overflow-x: auto; overflow-y: scroll;">
</div>
</div>
</div>
</div>
</div>
This is the layout i'm talking about. the only div that has the float is suppsoed to be to the left of #actiuni and #lista_actiuni. Looks exactly like that in Firefox, but IE puts #lista_actiuni below everything else. It puts the float div to the left, the table to the right of it starting at the top but then when it's time to place #lista_actiuni it drops it all the way down to where the floaty div ends. To make it worse it sometimes corrects itself and places everything nicely, only to be broken again when I switch pages or refresh.
Any ideas on what could be causing it?
I've scrapped together a demonstration using code from the page. Closest thing I can get. The problem is that in the example it looks wrong both in ie and in Firefox but on the actual website it works corectly.
edit: edited the jsfiddle, replaced with a version that works properly in Firefox yet fails in IE.
update: it seems removing the #actiuni_scroll div and the table within it and leaving only the bare data i've managed to make it display properly so my guess is that's where the problem is
update 2: I've fixed the problem by removing the width attribute from the #actiuni_scroll div. It seems firefox know how to calculate the 100% width to include the elements floated to its left but IE doesn't.
Completely off the top of my head (without anything visual to play with) I reckon you could try adding overflow:hidden to the .sectiuni_home_box_v div.
Floats need to be cleared, it does not look like you are doing this.
HTML
<div class="sectiuni_home_box_v">
<!-- IE6 has problems with more than 1 css rule & IE7 does not recognise psudeo's SO -->
<br class=clearfix />
</div>
CSS
.clearfix{
clear:both;
visibility: hidden;
height:0;
*zoom:1;
}
NOTE: IE7 will apply double margin to some elements and in some cases
double padding, you can do a quick fix with a css rule {
*display:inline;*zoom:1; }
I've fixed the problem by removing the width attribute from the #actiuni_scroll div. It seems firefox know how to calculate the 100% width to include the elements floated to its left but IE doesn't.
After lots of attempts and search I have never found a satisfactory way to do it with CSS2.
A simple way to accomplish it is to wrap it into a handy <table> as shown in the sample below. Do you know how to do it avoiding table layouts and also avoiding quirky tricks?
table {
margin: 0 auto;
}
<table>
<tr>
<td>test<br/>test</td>
</tr>
</table>
What I want to know is how to do it without a fixed width and also being a block.
#Jason, yep, <center> works. Good times. I'll propose the following, though:
body {
text-align: center;
}
.my-centered-content {
margin: 0 auto; /* Centering */
display: inline;
}
<div class="my-centered-content">
<p>test</p>
<p>test</p>
</div>
EDIT #Santi, a block-level element will fill the width of the parent container, so it will effectively be width:100% and the text will flow on the left, leaving you with useless markup and an uncentered element. You might want to try display: inline-block;. Firefox might complain, but it's right. Also, try adding a border: solid red 1px; to the CSS of the .my-centered-content DIV to see what's happening as you try these things out.
This is going to be the lamest answer, but it works:
Use the deprecated <center> tag.
:P
I told you it would be lame. But, like I said, it works!
*shudder*
I think that your example would work just as well if you used a <div> instead of a <table>. The only difference is that the text in the <table> is also centered. If you want that too, just add the text-align: center; rule.
Another thing to keep in mind is that the <div> will by default fill up all the available horizontal space. Put a border on it if you aren't sure where it starts and ends.
The following works well enough. note the position, and the use of auto
<div style="border: 1px solid black;
width: 300px;
height: 300px;">
<div style="width: 150px;
height: 150px;
background-color: blue;
position: relative;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;">
</div>
</div>
NOTE: not sure if it works in IE.
In FF3, you can:
<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>
This has the advantage of using whatever element makes most semantic sense (replace the div with something better, if appropriate), but the disadvantage that it fails in IE (grr...)
Other than that, without setting the width, your best bet is to use javascript to precisely position the left-hand edge. I'm not sure if you'd class that as a 'quirky trick', though.
It really depends on what you want to do, of course. Given your simple test case, a div with text-align: center would have exactly the same effect.
#wrapper {
width: 100%;
border: 1px solid #333;
}
#content {
width: 200px;
background: #0f0;
}
<div id="wrapper" align="center">
<div id="content" align="left"> Content Here </div>
</div>