For past hours I've been struggling with the following problem:
I have two div elements wrapped inside a contaier, which itself is wrapped inside multiple other divs.
The container div has display:flex.
I have created a minimal code example hosted on codepen containing the same code listed in here
<div class="samples">
<div class="sample">
<div class="flex-parent">
<div class="div1">
<div>I'm div 1</div>
</div>
<div class="div2">I'm div 2</div>
</div>
</div>
</div>
The CSS code is pretty straight forward. I want the first element the be the
size of its content and the second one to grow the remaining width
* {
box-sizing: border-box;
}
.samples {
background: #2B2B2B;
}
.samples .sample {
padding: 50px;
}
.flex-parent {
border: 1px dashed green;
display: flex;
height: 100px;
}
.flex-parent .div1 {
flex-shrink: 0;
background-color: #D3394C;
}
.flex-parent .div2 {
flex-grow: 1;
}
But the surprising problem was that the first element was not extending fully in terms of height and leaving an empty pixel space after him, as you can see in the image below (made from codepen)
BUT
Looks like the problem solves itself when you remove this part
.samples .sample {
padding: 50px;
}
from the code, thus removing the padding of the sample wrapper.
BUT2 it shouldn't have any influence on the elements inside the other container, should it?
It believe it should be related to box-sizing: border-box, but I cannot understand why the child elements behave in such a strange way, given the fact that it should correctly have 198px height and leave no empty space after it.
What is the idea behind this, could somebody please explain?
EDIT1: looks like the issue is only present in latest versions of desktop Chrome (65.0.3325.181) and Edge (41.16299.248.0)
EDIT2: on older versions of Chrome (42), it is working as intended.
The problem was in my display scaling 125%, that generated the gap. Bringing it back to 100% solved it.
There must be some issues inside chrome and edge engines (because it works well in Firefox).
For more information, follow the link https://github.com/electron/electron/issues/8332
Related
According to Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification,
when an element is given a float property other than none, it implicitly sets display to block, but the way i see it, its behaving like an inline-block element as it doesn't take 100% of it's parent's width.
an example:
These two blue bloxes are floated to the left so they implicitly set to display:block but they are not taking the whole width of the wrapper div (red-colored rectangle).
HTML Code
<div class="wrapper cf">
<div class="box"></div>
<div class="box"></div>
</div>
CSS Code
.wrapper {
background-color: red;
padding: 10px;
}
.box {
margin: 10px;
height: 100px;
width: 100px;
background: lightblue;
float: left;
}
.cf:after {
content: "";
display: block;
clear: both;
}
“There is a simple solution that fixes many of the IE float bugs. All floats become a block box; the standard says that the display property is to be ignored for floats, unless it’s specified as none. If we set display:inline for a floating element, some of the IE/Win bugs disappears as if by magic. IE/Win doesn’t make the element into an inline box, but many of the bugs are fixed.”
[Float Layouts]
As that suggests, the primary reason the block is added is for fixing issues that came up with floats in IE. Although the display:block is implicitly defined, display values aren't technically applied to floated elements except for if it is set to none.
If you want to learn more about floats, this is a pretty good article: CSS Float Theory: Things You Should Know
I'm new to CSS tables, it's my first time. So I discovered that when you set display:table to a div, you can forgot all margin and padding (and whatever) you're planning on it's future cause they are ignored. Nice. The only property I've found to make this job is border-spacing but it is a little limited comparing with margin and padding. It have only two ways of styling, horizontal and vertical. You can't set the value of the side you want like border-spacing-left or border-spacing: 0 1px 2px 3px.
In my case, I have a table with one row that lies on the top right corner of the screen. I want it attached on the very top and spaced horizontally, which caused me problems. The top is okay but the right detaches from the border when I use border-spacing: 10px 0.
Smart guys like me don't see this as a problem, cause we can set it margin-right negatively, making it be attached again on the right side of the browser. Wow, whata smart ass I am!
However, I saw an little damn scrollbar on the bottom of the screen like a roach under your cooker at the kitchen. I hate roac.. scrollbars specially horizontals, so I got my inseticide called overflow-x and kil.. set it to hidden. She run desperately and dissapeared, but I know that she's there, somewhere staring at me. And this is driving me crazy.
Seriously now. I think this isn't the right way to do that and I hope somebody can teach me how to do it.
This is my scenario on Fiddle
Thank you in advance(mainly for reading this crap).
There are a few ways of achieving what you're trying to achieve. Most commonly, using display: table, display: table-cell, etc isn't very high on the list.
So, here's how I would do it: http://jsfiddle.net/VKnQZ/1/
Do bear in mind that I don't know the full circumstance of what you're attempting so it may well be that I'm missing a (valid) reason that you're using table display properties in the first place.
You'll notice a few things here:
I've done away with your table display properties. I don't think you need them, and floats do the job just fine (just remember to clear them).
I've removed your display from the cell divs. As someone in the comments above pointed out, divs inherit display: block by default. The additional dimensions set their size as you already had it.
I'm using the + selector to put in the spacing between elements. In this instance div + div is essentially short-hand for 'every div which is beside another div' - so all of them aside from the first.
Hopefully that achieves what you're aiming for and does away with all the nasty hacky overflow/margins/etc.
Here's the code:
HTML (only change is to remove the row div):
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
CSS:
body {
padding: 0;
margin: 0;
}
#nav {
float: right;
}
#nav div {
float: left;
width: 120px;
height: 40px;
}
#nav div + div{
margin-left: 10px;
}
.red { background-color:#f00 }
.green { background-color:#0f0 }
.blue { background-color:#00f }
and can you tell me why are you trying to imitate table behavior when you have "table" tag? it could be styled pretty well also
what you are doing is sometimes called "divitis"
edit:
you can position table absolutely http://jsfiddle.net/n83kT/
Not too sure if this the right place to discuss float and display :)
But , flex is on his way, and display is already quiet efficient.
Display + direction and you could kick floats away.
border-spacing version : http://jsfiddle.net/GCyrillus/2EZ3F/
border-left version : http://jsfiddle.net/GCyrillus/2EZ3F/1/
<section>
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
</section>
section is to set direction .. or not
unset & reset direction to fake float ,
else use text-align if you dislike this method.
In CSSheet, notice inline-table instead of table so it reacts to text-align and or direction (not all pages are EN or FR :) )
body {
padding: 0;
margin: 0;
}
section {
direction:rtl; /* unset regular if you wish, else text-align will do for inline-boxes */
}
#nav {
direction:ltr;/* reset/set here if you want cells from left to right */
display:inline-table;
border-spacing: 10px 0 ;
}
#nav div {
/*direction:ltr; reset here if you want cells from right to left */
display: table-cell;
width: 120px;
height: 40px;
}
#nav div + div {
margin-left: 10px;
}
.red {
background-color:#f00
}
.green {
background-color:#0f0
}
.blue {
background-color:#00f
}
My 2 (late) cents for a different point of view :)
For completeness, I would like to offer the case for the often overlooked inline-block display type.
Similar to the use of floats, the HTML is as follows:
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
and the CSS:
#nav {
position:absolute;
top:0;
right:0;
}
#nav div {
width: 120px;
height: 40px;
display: inline-block;
vertical-align: bottom;
}
#nav div + div {
margin-left: 10px;
}
This inline-block approach behaves similarly to the floated-child-div's approach.
In this application, I can't think of a reason to use one over the other.
One minor consideration is that inline-block is not supported in some older browsers.
Otherwise, both approaches use the same mark-up and the CSS rules are similarly simple.
The choice may depend a lot on the content that you use in the #nav div elements.
Demo fiddle: http://jsfiddle.net/audetwebdesign/EVJPN/
What I'm trying to do is have three divs wrapped in a fixed width container that will auto resize when the content in the middle div expands. As the middle gets larger the two beside it get smaller if that makes sense.
<div id="container">
<div class="one"/>
<div class="middle">...</div>
<div class="two"/>
</div>
Not sure if I should be using div or span for this.
Any advice on the CSS?
#thirtydot The two divs at the side of
the middle div will contain nothing,
just a border-top, the middle div will
contain two links. :)
In that case, I'm answering with something simpler that you might be able to use.
See: http://jsfiddle.net/uZ5dn/
<div class="container">
<span class="middle">content con tent the tent of cons content content</span>
</div>
.container {
border-top: 5px solid #f0f;
text-align: center;
}
.middle {
background: #fff;
display: inline-block;
position: relative;
top: -5px; /* same as border-top-width */
}
It's not awesome, but it might be good enough.
At the very least, I'll get a better idea of what to suggest next.
If I'm reading your question correctly, I suspect that you'll have to do this with JavaScript, and DIVS.
You can get and set the actual size of the DIVs in pixels using the .height() function.
So, you could do something like:
if ($('#div2').height() > 200) {
$('#div1').height(100);
$('#div3').height(100);
} else {
$('#div1').height(200);
$('#div3').height(200);
}
I have two fieldsets (as below) that are inside a div. They have been style inline and 50% width. In my head I think they should display on the same line but (at least in chrome, haven't checked IE or ff) the second one wraps to the next line.
I have a twofold question:
Why oh why oh why!?
Is there an easy fix for this? (other than maybe setting them to be 49.8% width)?
http://jsfiddle.net/z22KR/2/
*
{
box-sizing: border-box;
}
fieldset
{
margin: 0px;
border: 0px;
padding: 0px;
display: inline-block;
width: 50%;
background-color: grey;
}
div
{
width: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: green;
}
div div
{
background-color: red;
}
<div>
<fieldset>1</fieldset>
<fieldset>2</fieldset>
<div>div</div>
</div>
Edit I changed inline to inline-block as I intended. Sorry for the confusion there.
Edit2 Also would rather not do any floating if at all possible.
Edit3
My html looks more like
<div class="twoChildren">
<fieldset id="fieldset1"><legend>Fieldset 1</legend>
<div id="listofStuff1">
<table>
...
</table>
</div>
</fieldset>
<fieldset id="fieldset2"><legend>Fieldset 2</legend>
<div id="listofStuff2">
<table>
...
</table>
</div>
</fieldset>
</div>
The problem is caused by your HTML. All whitespace in HTML source code is displayed as a single space character - I'm not sure about the exact technical details of this. This space content between your div elements is what causes the second child div to wrap.
Changing the HTML code in your fiddle to the following solves your problem:
<div><!--
--><fieldset>1</fieldset><!--
--><fieldset>2</fieldset><!--
--><div>div</div><!--
--></div>
Or you could just write all tags adjacent to each other, as long as there's no whitespace between them.
There are many mistakes in your css, please study and write logically. btw do you want like this??
DEMO
EDIT
I find below things are not Good practice, please correct me if i am wrong
Using div div {} is misleading, better use class and id selector
also optimize your css , when you always need margin ,padding and border to 0px then why dont you write on the top with *{}
and also set the css in the order your elements are in the DOM, you first declare css for fieldeset then set css rule for div
#James Valid CSS is another issue and optimize CSS is another
I have a problem with simple Images in DIV containers in IE7.
I have it a few times on my homepage, here is an example:
<div id="divSearchBottomLinks" class="divSearchBottomLinks">
Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
<div id="divSearchButtomLinksEffect" class="divSearchButtomLinksEffect">
<img src="Images/Design/DefaultPage/searchButtonEffect.png" alt=""
style="border: 1px red solid;" />
</div>
</div>
CSS is:
.divSearchButtomLinksEffect
{
float:right;
padding-right:8px;
}
.divSearchBottomLinks
{
border: 1px solid red;
width: 99%;
height: 15px;
text-align: left;
font-size: 10px;
word-spacing: 8px;
color: Gray;
}
Here is how it looks like:
http://s3.imgimg.de/uploads/2204cc79eJPG.jpg
As you can see: No reason, why the image should be more in Bottom then the other, you see left FF4 (same in IE8/IE9/Opera9/Opera10) and right only IE7 who seems to have a problem with this.
I can't see how to fix it, I can only see from where it somes... any ideas?
For some reason the element floating to the right will float beneath the text on the line in IE7, The text takes up the full width of the container, just as a div elements does by default, and pushes the floating element down.
Put the text before the image in a div element also, and float that to the left, that way the element floating to the right will not be pushed down.
Browsers have different default CSS for various HTML elements. The first thing I would do is add a good reset so that all elements start out with the same basic settings. This will take some of the guess work out of the debugging process. Add this BEFORE the rest of your CSS -
http://meyerweb.com/eric/tools/css/reset/
Next, you should always specify the width in a floated container. IE in particular has issues if you don't specify widths properly.
I would try go with something like this instead:
<div id="bottomLinks">
<p>Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
</p>
<img src=".." />
</div>
<style>
div#bottomLinks {
overflow: hidden;
}
div#bottomLinks p {
float: left;
}
div#bottomLinks img {
float: right;
}
</style>
You're problem right now is probably because of the width of 99% and that the first element doesn't float.