Take this HTML:
<div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>
</div>
With the companion CSS:
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 1px;
background: red;
}
The result of this is four blocks, which have between them 2 pixels of space (1px from the right margin of the left block and 1px from the left margin of the right block).
Is there a way that I can achieve a similar effect to border-collapse? ie. I want there to be only one pixel of margin between adjacent blocks.
This is a basic example of often more complex situations that I run into, and I don't want to get around it by by anything similar to only setting margin-left to 1 pixel etc.
There are multiple ways to this
One of them is
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 1px 1px 1px 0;
background: red;
}
div.block:last-child {
margin: 1px 0 1px 0;
}
Another is
div.block+div.block { margin-left: 1px; }
You can check the demo of both way here
How about using the CSS selector :first-child and :last-child to alter the first and last <div>?
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 2px 1px 2px 0;
background: red;
}
div.block:first-child {
margin-left: 2px;
}
div.block:last-child {
margin-right: 2px;
}
If you can alter the markup itself, then I guess we can have a cross browser compatible solution:
<div class="block"> <div class="block_2"></div> </div>
and then apply the css like:
div.block{float: left; width: 100px; height: 100px; }
div.block_2{width:99px; height:100px; background-color:red}
Assign a class for last block called 'last'.
The set margin-right of every block to 1px.
Set margin-right of block that has last class to 0.
.block.last { margin-right: 0px; }
Pseudo selectors like forst-child and last-child are not well supported so I think this is the best option you have.
Related
.useless {
float: right;
clear: right;
border: 1px dashed blue;
height: 50px;
width: 100%;
}
div.pretraga {
border: 3px groove red;
width: 20%;
float: right;
margin-right: 5%;
border-top: 0;
display: flex;
justify-content: center;
height: 250px;
<div class="pretraga">
<div class="useless">
</div>
<div class="useless">
</div>
</div>
I have 2 divs inside a div that refuse to act as block elements. For some reason, they are displayed in-line, not below each other. Could you explain what is the cause for this, not only how to solve it?
Larger div has width and height set.
Smaller divs also have their dimensions set.
Display:block is used on all 3 divs.
I tried using float, didn't work.
I tried using clear together with float, didn't work.
The only thing that is working but terribly, is giving each of them position:relative.
You don't need to provide me with code, just please try to explain why this happens, what is the general problem, and how do you solve it, because to me, as a beginner, it doesn't make sense that they display each other sometimes below, sometimes next to each other.
It's because you use flex on the parent - the default for children of flex parent is to align next to each other, remove the flex and it will work.
I would also say that as your children are 100% width, there is no need for floating so you can remove that too
.useless {
border: 1px dashed blue;
height: 50px;
width: 100%;
}
div.pretraga {
border: 3px groove red;
width: 20%;
float: right;
margin-right: 5%;
border-top: 0;
justify-content: center;
height: 250px;
}
<div class="pretraga">
<div class="useless">
</div>
<div class="useless">
</div>
</div>
More information about flexbox
Flexbox playground (codepen)
I have a general, possibly beginner question about HTML.
#container {
height: 200px;
max-width: 600px;
border: 1px solid black;
margin: auto;
margin-top: 10px;
}
#item1 {
height: 100px;
max-width: 200px;
border: 1px solid red;
}
#item2 {
height: 100px;
max-width: 200px;
border: 1px solid blue;
}
<div id="container">
<div id="item1"></div>
<div id="item2"></div>
</div>
My question is, why do #item1 and #item2 divs go underneath each other as opposed to next to each other? Isn't it true that they are no longer block-level elements because I have specified a set width for them? Why are they not lined up next to each other inside of #container? The #container has more than enough width to accommodate both items.
Note: This is strictly for learning/curiosity. I know that I can use margins and positioning to place them where I want to. However, I'm just curious as to why it behaves this way.
Thanks.
Div elements are block elements, unless you specify the display property to inline or inline-block it wont align to to the right like other inline elements do.
adding display : inline-block to the css of div's will give you what you want.
You have two ways to place you blocks horizontally: display property or float property.
It doesn't matter that you have set width to your elements. They are still block and displayed vertically.
To change this behaviour, use stylesheet (note that in both cases width, not max-width should be set):
#container {
height: 200px;
max-width: 600px;
border: 1px solid black;
margin: auto;
margin-top: 10px;
}
#item1 {
height: 100px;
width: 200px;
border: 1px solid red;
display: inline-block;
}
#item2 {
height: 100px;
width: 200px;
border: 1px solid blue;
display: inline-block;
}
or this:
#container {
height: 200px;
max-width: 600px;
border: 1px solid black;
margin: auto;
margin-top: 10px;
}
#item1 {
height: 100px;
width: 200px;
border: 1px solid red;
float: left;
}
#item2 {
height: 100px;
width: 200px;
border: 1px solid blue;
float: left;
}
<div> tag always start with new line if you are not using frameworks like bootstrap or other. If you want to see multiple items in single line then add css like display: inline-block
just add float:left; property in child divs or display:inline-block; https://jsfiddle.net/8tvn0kw6/5/
div is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.
Even if you specify width it wont allow other elements right next to it. This the property of block level element.
Use the css inline-block it will occupy the specified width or content width.
https://developer.mozilla.org/en-US/docs/CSS/display
The height of the container should be the sum of heights of the child divs and the heights of the borders of the children
ie., height of parent container = 100+ 100+ 1+ 1+ 1+ 1 = 204px
#container {
height: 204px;
}
The #container ie you div has a display property of block. This is a default property if you don't set it to anything else. In your case the div takes this default display property.
To view #item1 and #item2 side by side just use display: inline-block in your #container.
Please replace your class like below.
#item1{
height:100px;
max-width:200px;
border:1px solid red;
display:inline-block;
}
#item2{
height:100px;
max-width:200px;
border:1px solid blue;
display:inline-block;
}
I'm trying to understand the basics of css applied to a test site that I'm working with.
Reducing the problem to it barest case I have three equal , two of which should contain lists, the third of which does not.
The html is as follows:
<div id="Div1" class="Results">
<select id="FirmList" size=10></select>
</div>
<div id="Div2" class="Results">
</div>
<div id="Div3" class="Results">
<select id="PersonList" size =10></select>
</div>
And the css as thus:
div {
border: 1px dashed black;
border-radius: 5px;
padding: 10px;
margin: 8px;
}
select {
width: 290px;
}
.Results {
border: 2px solid black;
width: 300px;
height: 500px;
display: inline-block;
}
If I comment out the elements the three s align correctly.
Bringing in either causes it's parent to move down the page. None of the other elements on the page (tables, headers and other divs) seem to affect the alignment in the same way.
Any suggestions?
Add vertical-align:top to the .Results rule
.Results {
border: 2px solid black;
width: 300px;
height: 500px;
display: inline-block;
vertical-align:top;
}
Demo at http://jsfiddle.net/QBVz9/1/embedded/result/
It has nothing to do with the select elements. even if you put a single letter in the .Results elements it will cause the problem.
It has to do with the fact that you have turned the div elements to display:inline-block.
.float-left {
float:left;
}
Fiddle example
A solution could be to add float on select element.
I have a similar HTML structure like this Fiddle: http://jsfiddle.net/hAMmK/3/
The HTML structure:
<span class="all">
<span class="group-1">
<span class="a">A</span>
<span class="b"><input type="text" placeholder="b" /></span>
</span>
<span class="group-2">
<span class="c">C</span>
<span class="d">D</span>
</span> </span>
The current result with the css is
but my desired result would be
This result should be responsive, I mean, the width for the input text should be the maximum with the correct current width of the device/browser. Furthermore, I need compatibility with the most common browsers (as desktop as mobile/tablet).
What is the best way to solve this?
Use CSS3 Calc: Running Demo
input[type="text"]{
width: calc(100% - 100px);
}
Not (yet) supported everywhere, though, and you need to know the width to subtract.
If your buttons are static, ie you know the width/number of the left/right span's then you could use floats. It's gives a smoother responsive feel, but uses negitive margins which sometimes aren't that nice.
I changed the CSS to:
.group-1 {
width: 20px;
float: left;
margin-top: 6px;
}
.group-2 {
margin-left: 30px;
margin-right: 70px;
}
.group-3 {
width: 60px;
float: right;
margin-top: -20px;
}
Have a look at:
http://jsfiddle.net/hAMmK/16/
Like I said, it will only work if you can fix your left/right width's but seems to give a clean responsive feel.
As an alternative to css3 style calc if you need to support other browsers here is another solution.
If A is a label and C and D are buttons (as I guess), you can use width 100% in the input field and float it left, then you have to display block its parent (if it is an span as in that case) and add a margin-right the sime size than your buttons. The margin will collapse because the content is floated and the buttons will appear at the right side of your input field.
You could then do the same for the label if you know its size or you can better use a table to allow changing the label text (maybe for internationalization).
You can see it applied to your example:
http://jsfiddle.net/cTd2e/
/*Styles for position here*/
.all{
line-height: 22px;
}
table {
width: 100%;
float: left;
}
.second-cell input{
width: 100%;
float: left;
}
.b {
display: block;
margin-right: 130px;
}
td.first-cell {
white-space: nowrap;
}
td.second-cell {
width: 100%;
}
.group-2{
vertical-align: middle;
margin-left: 10px;
}
Also if the buttons contain text then you can use a table inside a table to have the input field 100% and the rest auto.
I am not aware if there is a more modern compatible way of doing that, it would be great!
Change the widths to use a percentage.
.a {
padding: 3px 7px;
background-color: LightBlue;
border: 2px solid CornflowerBlue;
border-radius: 5px;
color: SteelBlue;
width: 10%;
}
.c {
padding: 3px 7px;
background-color: Moccasin;
border: 2px solid BurlyWood;
border-radius: 5px;
color: DarkKhaki;
width: 10%;
}
.d {
padding: 3px 7px;
background-color: LightSalmon;
border: 2px solid Brown;
border-radius: 5px;
color: IndianRed;
width: 10%;
}
input{
width: 70%;
}
JS Fiddle: http://jsfiddle.net/hAMmK/4/
I am sure that this question is already answered, but I find it hard to search for it.
I have the following html:
<div id='outerBox'>
<div id='leftBox'><div id='secondLevelBox'></div></div>
<div id='rightBox'></div>
</div>
and the following css:
#outerBox {
width: 300px;
height: 200px;
border: 1px solid black;
}
#leftBox {
height: 100%;
width: 55%;
background-color: blue;
float: left;
}
#rightBox {
height: 100%;
width: 45%;
background-color: yellow;
float: left;
}
#secondLevelBox {
height: 100%;
width: 100%;
}
(See http://jsfiddle.net/dsMdb/1/)
this displays ok. But if I now add a border: 1px solid red to one of the inner divs, they will grow 2 pixels and the layout will break: http://jsfiddle.net/dsMdb/5/
How can I wrokaround this? (solutions for IE >=8 and current FF are ok)
You can change the way the browser is supposed to calculate the offset for the border & layout.
Take a look at the Box Model properties in CSS3, this way you can define the offset etc.
The command you're looking for in CSS is box-sizing. By default this set to content-box, which adds the width, padding etc as different values on top of each other.
By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.
Should apply to your border as well normally.
Problem is that it adds a border on the outside of that inner div. Since your red border is 1px, then it adds total of 2px.
Quick way to fix this is to remove `2px` from the outer `div`s width.
#outerBox {
width: 298px;
height: 200px;
border: 1px solid black;
}
Also, I would like to add, that this fix is very browser compatible ;)
I would suggest to have pixel graduation in the width and accordingly give room for border, like
Since total width is 300 px,
#leftBox {
height: 100%;
width: 165px;
background-color: blue;
float: left;
}
#rightBox {
height: 100%;
width: 145px;
background-color: yellow;
float: left;
}
now reduce the width accordingly and this would work across browsers.