would be glad if someone would help :)
Depending on the situation, there are two possibilities. Two divs with the same class side by side, and div with different classes, depending on the situation I would like to add css to the first div with class image when next to is albo div with class image
1.
<div class="image"></div>
<div class="image"></div>
.image {
padding-right: 40px;
}
Is it possible two give some rule like below but only for the first div with class image when the second div with class image is next to.
.image + .image {
padding-right: 5px
}
You cannot select depending on descendants or subsequent siblings; from any point you've already reached in your selector, you can only select onward/downward.
What you can do to achieve the desired result is to put a wrapper element around your elements, and then exclude :last-child:
.outer { font-size: 0; border: 1px solid #333; display: inline-block; }
.inner {
background-color: #ccc;
display: inline-block;
height: 40px;
width: 40px;
}
.inner:not(:last-child) {
margin-right: 20px;
}
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed last year.
I keep running into this problem - I have html like this:
<div class="line">
<div class="word">hello</div>
<div class="word">there</div>
<div class="word"></div>
</div>
and this css:
.line
{
background-color:red;
padding:10px;
}
.word
{
display:inline-block;
width:200px;
height:40px;
padding:10px;
background-color:white;
}
And I get this:
Why is it happening, and how do I fix it so that an empty string is formatted exactly the same as a string with values?
Vertical align
You could apply vertical-align:top to .word
.line {
background-color: red;
padding: 10px;
}
.word {
display: inline-block;
width: 100px;
height: 40px;
padding: 10px;
background-color: white;
vertical-align: top;
}
<div class="line">
<div class="word">hello</div>
<div class="word">there</div>
<div class="word"> </div>
<div class="word"></div>
</div>
Empty selector
Or add a rule for empty .word divs, but this would still be malformed for divs with spaces in them. Could be helpful if you can't change the vertical-align
.line {
background-color: red;
padding: 10px;
}
.word {
display: inline-block;
width: 100px;
height: 40px;
padding: 10px;
background-color: white;
}
.word:empty:before {
content: "\0020";
display: inline-block;
}
<div class="line">
<div class="word">hello</div>
<div class="word">there</div>
<div class="word"> </div>
<div class="word"></div>
</div>
Why is this happening
Vertical alignment determines how 'inline' elements are positioned in relation to each other. by default it's set to baseline
Baseline will try to put 'most' of the text above the baseline and some of the dangling bits like the g p and q and y under the baseline.
That would make sense for text, the browser will attempt to do that for all text. Even text that's wrapped in divs and styled with paddings.
The entire empty div is put on the baseline.
Browser manufacturers just agreed that this is how it should be done.
If you look at it as if it where a text editor, It would make sense for small inline images, the default would be to push the entire line down based on the dimension of the image
Equal height <div> elements can be achieved when applying the .line class style display: flex.
.line {
background-color:red;
padding:10px;
display: flex;
}
.word {
border: 1px solid red;
margin-left: 5px;
margin-right: 5px;
width: 200px;
height: 40px;
padding: 10px;
background-color: white;
}
<div class="line">
<div class="word">hello</div>
<div class="word">there</div>
<div class="word"></div>
</div>
I need to create a container div with a pulled-up toggle button (but this could be also a simple span, a label or everything else), but that can be also re-sizable.
Unfortunately (https://css-tricks.com/almanac/properties/r/resize/):
Super important to know: resize does nothing unless the overflow property is set to something other than visible, which is its initial value for most elements.
I tried to write a simple example to compare limits of each conflicting properties (below only an extract):
<div class="container">
<button>Toggle</button>
<div class="content">...</div>
</div>
<div class="container overflow-hidden">
<button>Toggle</button>
<div class="content">...</div>
</div>
.container {
border:solid 1px red;
position:relative;
resize:horizontal;
}
.overflow-hidden {
overflow:hidden;
}
button {
position:absolute;
top:-20px;
}
I can't figure out how to solve this problem, so how to have a resizable container that can show an overflowed item (Possibly with only CSS)?
how to have a resizable container that can show an overflowed item
For resize to work, the element need an overflow other than visible, so the answer to that is no.
I need to create a container div with a pulled-up toggle button
If you alter your markup a little, you can do like this
Fiddle demo
Stack snippet
.container {
position: relative;
display: inline-block;
}
.overflow-hidden {
border: solid 1px red;
width: 50%;
height: 80%;
margin-top: 18px;
resize: horizontal;
padding: 20px;
overflow: hidden;
}
button {
position: absolute;
top: 0;
left: 0;
}
.content {
border: solid 1px blue;
height: 100px;
}
<div class="container">
<button>Toggle</button>
<div class="overflow-hidden">
<div class="content">
WITH "overflow:hidden":
<br> "resize" feature is available <strike>but pulled-up button is obviously semi-hidden</strike>
</div>
</div>
</div>
I have 3 identically sized inline divs with solid borders so they appear as rectangles. I gave them classes of left, center, and right.
When I have the left class as vertical-align: top and the right class as vertical-align: middle, they appear like so:
If I add vertical-align: bottom to the center class, it doesn't affect the center block at all. Rather, it moves the right class up as if I had made no vertical-align style rules at all. What CSS rules are causing this?
JSfiddle Before
JSfiddle After
Well, it is an interesting issue. I think the secret is by understanding that vertical-align: middle is different from the others, since it is affected by the lowercases letters of the parent element. I wrapped the divs in a wrapper in order to show it:
.wrapper {
margin: 0;
padding: 0;
height: 120px;
width: 500px;
}
div {
display:inline-block;
height:100px;
width:25px;
border:1px solid black;
}
.left{
vertical-align: top;
}
.center{
}
.right{
vertical-align: middle;
}
<div class="wrapper">
sddsfsdfdsfdsfdsfdsfdsfdsfdsaa
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
So it's easy to see that the right div, with vertical align: middle is relative to the position of the lowercase letters.
As for the second example:
.wrapper {
margin: 0;
padding: 0;
height: 120px;
width: 500px;
}
div {
display:inline-block;
height:100px;
width:25px;
border:1px solid black;
}
.left{
vertical-align: top;
}
.center{
vertical-align: bottom;
}
.right{
vertical-align: middle;
}
<div class="wrapper">
test test test test test
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
Here everything works by the rules as well- the items are aligned according to the baseline, and the middle to the letters of the parent container.
You can find more details about this behaviour over here
How do I align the red box with the gray box vertically?
http://jsfiddle.net/sLZzK/1/
I need several box combinations like that on my page, which is why I cannot simply push the red box up manually. A negative margin won't work either, since I do not know in advance how much content will be in the gray box. And the red box must overlap other page content, hence the absolute positioning. (http://jsfiddle.net/xMm82/)
CSS:
body {
padding: 0;
margin: 10px;
}
.left_div {
margin-bottom: 10px;
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
position: absolute;
border: 1px solid red;
left: 311px;
width: 200px;
height: 200px;
}
HTML:
<div class="left_div">gray box
<div class="right_div">red box</div>
</div>
Why are you using absolute positioning for such structure? In the case the better solution is to use float: left for each div. If you want to have two divs aligned vertically use display: table-cell rule. Here it is:
FIDDLE
UPDATE: Try to use this:
FIDDLE
what I've understood is you want gray box on top of Red box:
first of all wrap them in a parent div.
set the width of wrapper to desirable width.
set width to 100%(both red and gray) and you are done !! (fiddle)
If you want to arrange them horizontally:
left_div will be wrapper
it will contain 2 child div's
left one will have content and right one will be red box.(fiddle)
I would do it this way:
HTML:
<div class="container">
<div class="left_div">gray box</div>
<div class="right_div yellow">red box</div>
<div class="clr"></div>
</div>
CSS:
.container:not(:last-child){margin-bottom: 10px;}
.left_div,.right_div{float:left;}
.clr{clear:both;}
Fiddle here.
use float to arrange vertically and clear:both to prevent any errors
here's the corrected one
.left{
float:left;
width: 300px;
}
.right{
float:left;
width: 200px;
}
.left_div {
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
border: 1px solid red;
width: 200px;
height: 200px;
}
<div class="left">
<div class="left_div">
</div>
</div>
<div class="right">
<div class="right_div">
</div>
</div>
<div style="clear:both"></div>
http://jsfiddle.net/sLZzK/8/
There you go: http://jsfiddle.net/sLZzK/14/
HTML:
<div class="wrapper">
<div class="left_div">gray box</div>
<div class="right_div">red box</div>
</div>
CSS:
.wrapper {
border: 1px solid #369;
padding: 10px;
}
.wrapper > div {
display: inline-block;
vertical-align: middle;
}
You might also want to read about flexbox which will give you a similar and more consistent result, however it's not fully supported on various browsers yet.
I'm trying to center two divs that are using "display: inline-block;" but whenever I try to, it's not working. If I remove the inline-block class. It gets centered but displayed down the page instead of across. Example of code:
#news {
background-image: url('../img/news.png');
background-repeat: no-repeat;
height: 152px;
width: 320px;
display: inline-block;
}
#conBody {
background-image: url('../img/conBody.png');
background-repeat: no-repeat;
height: 260px;
width: 321px;
margin: 0px auto 0px auto;
text-align: right;
display: inline-block;
padding: 0px;
}
HTML :
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="news">
</div>
<div id="news">
</div>
<div id="news">
</div>
Looks like this:
You could contain everything within a wrapper. If you set the wrapper to display: table; then you can canter it even if you do not have a set width.
DEMO http://jsfiddle.net/kevinPHPkevin/nXj7c/
You need to use text-align property.
<div class="news-parent">
<div class="news">
a
</div>
<div class="news">
b
</div>
<div class="news">
c
</div>
</div>
.news-parent{
background: #ccc;
text-align: center;
}
.news {
width: 20%;
display: inline-block;
background: #666;
text-align: left;
}
Live example here: http://jsfiddle.net/7KFNR/
Advice: do not use IDs (#news) - ID is a unique identifier. Simply said: one ID can be found only once on single page. Use classes for rules that apply for multiple elements.
Remember: you need to specify width for div.news elements
You should wrap everything in a div and display it in the centre rather than trying to display each div in the centre individually.
You can centre a block element using CSS:
margin:0 auto;
Here is a fiddle with a barebones demo: http://jsfiddle.net/nRAyQ/3/