This question already has answers here:
How to add space between elements so they fill their container div?
(2 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
Now I have two divs under a parent div:
<div id="block_container">
<div id="bloc1">
some words
</div>
<div id="bloc2">
<input placeholder="...">
</div>
</div>
where
#block_container
{
text-align:center;
}
#bloc1, #bloc2
{
display:inline;
}
#contact textarea {
width: 80%;
border: 1px solid #ccc;
background: #FFF;
margin: auto 0 5px;
padding: 10px;
}
This is ok for the two div components to align center. However I would like two align them two to left-right end: [some words <----- Space -----> input box]. I've tried:
#block_container
{
text-align:justify;
}
but that won't work.
Can you please kindly suggest to me how can I achieve this? Thanks.
Related
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 11 months ago.
Here i have three divs i want the div three to have margin from the top but since then I am giving it the margin to the third div but what and expected to move from the top only bit the complete div is moving
*{
margin:0;
padding:0;
}
.divone{
background-color:red;
}
.divtwo{
margin:10px 4px;
}
.divthree{
display:flex;
justify-content:space-between;
}
<div class="divone">
<div class="divtwo">
<div class="divthree">
<div class="ndiv">
<h3>I am</h3>
</div>
<div class="ndiv">
<h3>Hello</h3>
</div>
</div>
</div>
</div>
According to your code you're currently applying it to .divtwo.
What you actually need to do is apply padding to .divthree to get what you want.
Change your CSS to the following to accomplished that:
*{
margin: 0;
padding: 0;
}
.divone{
background-color: red;
}
.divthree{
display: flex;
justify-content: space-between;
padding: 10px 4px;
}
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 6 years ago.
I'm currently writing a RSS parser and I use Ractive to generate the view. I'm trying to vertically align the contents of .feed-text-offset according to the height of .feed-item.
How can I accomplish this?
Demo: https://jsfiddle.net/zzx5L4e9/
The output HTML is like this:
<div class="feed-item">
<div class="news-img-container">
<img class="news-thumbnail" src="#" style="max-width: 125px;">
</div>
<div class="feed-text-offset">
Text here
<span class="feed-item-since">1 hr</span></div>
<div style="clear: both;">
</div>
</div>
CSS
.feed-item {
padding: 2px;
background-color: green;
float:left;
}
.feed-item-since {
font-size: 0.8em;
font-weight: 400;
margin-top: 5px;
display: block;
}
.news-img-container {
width: 125px;
float: left;
}
.feed-text-offset {
margin-left: 130px;
}
Found my answer from https://stackoverflow.com/a/31078418/969894 and thanks #GCyrillus
I can apply the following to .feed-item and re-adjust the text offset to vertically align the contents of .feed-text-offset
display: flex;
align-items: center;
This question already has answers here:
Align two inline-block div with content
(2 answers)
Closed 7 years ago.
Desired result: The two divs with class inline should be on the same horizontal level (the second one contains two other divs with some content).
However, as can be seen below, the two divs are not aligned vertically. If I remove the content (the word "text") from both the .inside divs, they line up as expected.
How can I make them line up? What is causing this?
.inline,
.inside {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
.inline {
display: inline-block;
background-color: chartreuse;
}
.inside {
height: 48px;
background-color: salmon;
border: solid 1px black;
}
<div class="inline">
</div>
<div class="inline">
<div class="inside">text</div>
<div class="inside">text</div>
</div>
<hr>
<div>Without content (i.e. the word "text"):<div>
<div class="inline">
</div>
<div class="inline">
<div class="inside"></div>
<div class="inside"></div>
</div>
.inline {
vertical-align: top;
}
Thanks everybody.
This question already has answers here:
Using CSS Target to highlight parent div
(2 answers)
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
Is there anyway we can target the container of an element? I seems can't find a way, here is an example:
The HTML:
<div class="wrapper">
<div class="content" id="TopSection">
<span>Box A</span>
</div>
</div>
<div class="wrapper">
<div class="content" id="BottomSection">
<span>Box B</span>
</div>
</div>
The wrapper and the content are both has styling class, for example:
.wrapper {
background-color: black;
}
.content {
padding: 10px 20px;
}
How to change the background color of the wrapper on the BottomSection only, without adding anther wrapper class, i.e wrapperB? so can we target the wrapper that contains that ID only?
Try this-
.wrapper {
background-color: black;
}
.wrapper:nth-child(2) {
background-color: orange;
}
.content {
padding: 10px 20px;
}
You can target parents with jQuery, to add a class that you could then target with CSS:
$('#BottomSection').closest('.wrapper').addClass('changeMe');
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
How can I remove the ghost space between inline-block elements?
Here is a jsfiddle http://jsfiddle.net/hFDcV/ where you can clearly see a horizontal space between the divs.
And the StackOverflow mandated example code:
<div id='row'>
<div class='box'>Something</div>
<div class='box'>Something</div>
<div class='box'>Something</div>
<div class='box'>Something</div>
</div>
#row {
background-color: red;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
display: inline-block;
margin: 0;
padding:0;
}
One solution: http://jsfiddle.net/hFDcV/4/
Set the font-size of the parent container to 0 and reset it on the child elements.
#row {
font-size:0;
}
.box {
font-size:12pt;
}
Another solution: http://jsfiddle.net/hFDcV/10/
You can float the box elements left. Setting overflow:hidden; on the row will prevent it from collapsing to 0 height.
#row {
overflow:hidden;
}
.box {
float:left;
}
There are other solutions in the fantastic article on this problem shared by #RickCalder: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
One easy way to achieve this is to insert commentary between inline-block elements!
like this :
<div id='row'>
<div class='box'>Something</div><!--
--><div class='box'>Something</div><!--
--><div class='box'>Something</div><!--
--><div class='box'>Something</div>
</div>
Hope this helps someone!