I'm puzzled as to why on some browsers I get regular grid spacing between squares and others I get different spacing vertically than I do horizontally. I'm using Chrome Version 96.0.4664.93 (Official Build) (x86_64).
I was told a little hack which is border-right: 4px solid white; to the CSS style for div>div. However, I'd like to know why the inconsistency in rendering.
grid_on_Chrome _96, grid_on_Electron
div>div {
display: inline-block;
background-color: rgb(68, 157, 230);
border: 2px solid white;
}
<div>
<div style="width: 50px; height:
50px;">
</div>
<div style="width: 50px; height:
50px;">
</div>
</div>
<div>
<div style="width: 50px; height: 50px;">
</div>
<div style="width: 50px; height: 50px;">
</div>
</div>
Related
I have some questions about this code.
The first inputtxt class element is a simple inline-block display. Last two inputtxt class elements are input text field. Why they show different? Does input text field has default padding? Why the vertical align referring to gray div is different?
All inputtxt class elements have some top and bottom gap distances to previous and following lines. Why?
Thank you so much!
.remind{
float: left;
width: 80px;
height: 40px;
background-color: #cccccc;
border: 1px solid black;
}
.inputtxt{
display: inline-block;
width: 200px;
height: 12px;
border-radius: 5px;
border: 1px solid #999999;
}
<div class="formitm">
<div class="remind"></div>
<div class="inputtxt"></div>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
When the div height is smaller than div line-height the browser fits the next elements based on line-height setting by default, this just happen when element is inline-block. To fix it just add a line-height property to the element parent.
Also you can set .inputtxt padding to 0, removing input default padding.
.remind{
float: left;
width: 80px;
height: 40px;
background-color: #cccccc;
border: 1px solid black;
}
.inputtxt{
display: inline-block;
width: 200px;
height: 12px;
border-radius: 5px;
border: 1px solid #999999;
}
.formitm {
line-height: 10px; /*less or equal than inline-block child*/
}
<div class="formitm">
<div class="remind"></div>
<div class="inputtxt"></div>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/>
</div>
Add the following style to your .inputtxt
padding: 0;
vertical-align: top;
I really need some help with some easy css that I just can't get my head around.
I want to create boxes like in the link below.
I guess I could have the code for just one of them, and then use it over and over again, but how do I create the boxes so that they don't mind the other stuff around them?
Example here: http://s23.postimg.org/qypbfvv0r/boxes.jpg
Here: I have figured out a way of doing this. I hope that this helps you in some way in helping you figure out how to finish your task.
HTML:
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="containers">
<p class="heading">Heading</p>
<div class="inner1"></div>
<div class="inner2"></div>
</div>
CSS:
.containers {
width: 300px;
height: 150px;
border: 1px solid black;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.inner1 {
margin-left: 5px;
width: 135px;
height: 80px;
border: 1px solid black;
background-color: blue;
}
.inner2 {
position: relative;
float: right;
top: -60%;
margin-left: 5px;
margin-right: 5px;
width: 135px;
height: 80px;
border: 1px solid black;
background-color: red;
}
.heading {
padding-left: 20px;
}
You can start off using this code. After this you can give border styles and colors to the individual divs.
<div>
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
<div style="padding-top:10px">
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
<div style="padding-top:10px">
<div style="float:right"> Content </div>
<div style="float:left"> Content </div>
</div>
Hope this helps
I'm not good at float, so would appreciate any detailed answers, though I (and the customer) would be happy simply for a quick fix.
I have the following structure. (I cut out the parts I think don't matter, but copied the whole div at the bottom of the question). This is inside a much bigger div whose width is resizable by the user.
<div style="height: 16px; top: 0px; left: 0px; right: 0px; overflow: hidden;">
<div class="icon ui-icon ui-icon-triangle-1-e"></div>
<div>
<div style="white-space: nowrap; overflow: hidden; position: relative; text-overflow: ellipsis;float: left;">Really long title txt</div>
<div style="float: right; white-space: nowrap; overflow: hidden; position: relative; font-size: x-small; padding-right: 5px;">
<i>extra information 1</i>
</div>
</div>
</div>
I need the behavior to be:
The second div needs to stay on the right as the panel expands
The second div needs to completely disappear if the panel gets too small to display it in full.
The first div needs to auto-ellipsis if the panel gets too small.
If I remove the float from the first div, the second div seems to completely disappear. (Chrome's dev tools shows that its baseline is pretty much below the rest of the line, so it gets clipped.) However, if I shrink the panel, the first div does properly auto-ellipsis.
If I leave the float in the first div, the second div displays properly, and disappears properly when the panel gets too small. However, the first div then moves down so its baseline is below the rest of the line (and gets mostly clipped, and still shows the icon, so looks terrible).
The questions: Why is it behaving this way, and what do I do to make it behave the way I need?
Here's the full div, in case I trimmed out too much information above:
<div class="TreeViewNodeGroup ui-state-active ui-icon-check" unselectable="on" style="height: 16px; top: 0px; left: 0px; right: 0px; overflow: hidden;">
<div class="icon ui-icon ui-icon-triangle-1-e" aria-hidden="false" style="border: 0px solid blue;"></div>
<div class="icon" aria-hidden="true" style="border: 0px solid green; display: none;"></div>
<div class="icon" aria-hidden="true" style="border: 0px solid red; display: none;"></div>
<div>
<div unselectable="on" style="border: 0px transparent; white-space: nowrap; overflow: hidden; position: relative; text-overflow: ellipsis;float: left;">Really long title txt</div>
<div unselectable="on" class="rangeDiv" style="border: 0px transparent; float: right; white-space: nowrap; overflow: hidden; position: relative; font-size: x-small; padding-right: 5px;">
<i>extra information 1</i>
</div>
</div>
</div>
My coworker came up with the fix. The problem was in the icons before the divs. They needed to have their float removed, and position set to absolute. We set a margin-left on the first element:
<div class="TreeViewNodeGroup ui-state-active ui-icon-check" unselectable="on" style="height: 16px; top: 0px; left: 0px; right: 0px; overflow: hidden;">
<div class="icon ui-icon ui-icon-triangle-1-se" aria-hidden="false" style="border: 0px solid blue; position: absolute;"></div>
<div class="icon" aria-hidden="true" style="border: 0px solid green; display: none; position: absolute;"></div>
<div class="icon" aria-hidden="true" style="border: 0px solid red; display: none; position: absolute;"></div>
<div>
<div unselectable="on" style="border: 0px transparent; float: left; white-space: nowrap; overflow: hidden; position: relative; margin-left: 15px;">Really long title txt</div>
<div unselectable="on" class="rangeDiv" style="border: 0px transparent; float: right; white-space: nowrap; overflow: hidden; position: relative; font-size: x-small; padding-right: 5px;">
<i>extra information 1</i>
</div>
</div>
</div>
My question is, how do I avoid having the text on a new row?
My code:
<html>
<body>
<p >Seating availability.</p>
<p ><div style="width: 10px; height: 10px; background-color: green; border: 0px;" ></div> There are available seats.</p>
<p ><div style="width: 10px; height: 10px; background-color: yellow; border: 0px;" ></div> Available seats are decreasing.</p>
<p ><div style="width: 10px; height: 10px; background-color: orange; border: 0px;" ></div> Less than 15% of seats available.</p>
<p ><div style="width: 10px; height: 10px; background-color: red; border: 0px;" ></div> There are no available seats.</p>
</body>
</html>
How should I code this?
add display: inline-block to div
<html>
<head>
<style>
div
{
display: inline-block;
}
</style>
</head>
<body>
<p >Seating availability.</p>
<p><div style="width: 10px; height: 10px; background-color: green; border: 0px;" ></div>There are available seats.</p>
<p ><div style="width: 10px; height: 10px; background-color: yellow; border: 0px;" ></div> Available seats are decreasing.</p>
<p ><div style="width: 10px; height: 10px; background-color: orange; border: 0px;" ></div> Less than 15% of seats available.</p>
<p ><div style="width: 10px; height: 10px; background-color: red; border: 0px;" ></div> There are no available seats.</p>
</body>
</html>
There are so many display properties are available:
Try using display:inline-block;
div style="width: 10px; height: 10px; background-color: green; border: 0px;display:inline-block;" ></div>
Hope this helps!
fiddle-Demo
Remove <p></p> tag just use <div> as <p> is always takes new line.
Updated Fiddle
Use span instead of div and add (display:inline-block;)
paragraph (p) Can't Contain (div) but can contain (span)
'
Seating availability.
There are available seats.
Available seats are decreasing.
Less than 15% of seats available.
There are no available seats.
'
Put this code in your css file
div {
margin: 5px 10px 0 0 ;
float:left;
}
FIDDLE
I've run into a problem.
My code now:
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style="float: left; margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div>
</div>
And it seems like this now:
When the word in the second div is as short as can be placed after the first div, it's in one row, like this:
My goal is to get this design, when the decond div is longer. I'm not allowed to use WIDTH and FLOAT: RIGHT because the inner divs have to de dynamic!
Like this (PhotoShop):
Thanks for the help in advance!
Is this what you looking for
I removed the float:left from the second inner div and increased the margin.
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style=" margin-left: 60px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div></div>
Hope this helps
No width allowed ? OK here is a try:
AFAIK you can't do that with float without having a few width properties. Same with relative positioning of a "column": you still need a width and margin-left on the second column.
A solution is using CSS display: table; and table-cell (nope, not HTML table ;) ). It's as flexible as you want.
http://dabblet.com/gist/1717860 will show you an example (HTML is separated from CSS, an id was added for clarity but isn't really needed and deprecated element u was removed and b replaced by strong. But CSS font-weight: bold; would be better, without context)
#main {
display: table;
width: 500px;
margin: auto;
border: 1px solid blue;
}
#main > div {
display: table-cell;
border: 1px dashed black;
padding: 1em;
}
#main > div + div {
padding-left: 20px;
}
EDIT: compatibility IE8+
display: inline-block; is a good fallback for IE6/7. Well display: inline; zoom: 1; in fact, as IE6/7 doesn't understand the inline-block value but can achieve the same with inline+hasLayout)
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;width:50px;"><b><u>TEST</u></b></div>
<div style="float: left; margin-left: 20px; border: 1px solid black;width:420px;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div>
</div>
This is close to what you wanted. I just set the width for the inner div's. Also, you forgot to close the first div tag.
Float the first box left and give it an fix width. Then give the right div a margin-left bigger than the left div's width! ... and do not float the second div
Try:
<div style="overflow: hidden; width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; margin-right: 20px; border: 1px solid black;">
<b><u>TEST</u></b>
</div>
<div style="overflow: hidden;">
<div style="float: left; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
</div>
</div>
http://jsfiddle.net/ZmRY2/5/
Is like a table cell, try this
<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left;">
<div style="border: 1px solid black;"><b><u>TEST</u></b></div>
</div>
<div style="display:table-cell;">
<div style="margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
</div>
<br style="clear: both;">
</div>