Shifting middle div to left leaves white space on its right - javascript

I have three div elements inside a wrapper-div as below:
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>
I have applied below CSS on these which makes them appear side by side in the same row.
.wrapper-div {
display: inline-block;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: red;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
Now I want middle div to appear as a superscript to the text in left div. To achieve it I apply below CSS to the middle-div.
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
position: relative;
left: -45px;
top: -5px;
}
This makes the middle-div appear as a superscript to the left-div however it leaves an undesired white space in middle-div's original position.
Could you please help me with fixing it.
Note: In my original problem I have an uncontrolled variable number of divs where I want every second div to act as a superscript to its previous div.

Set the wrapper to position: relative; and display: flex;
then you can simply set the middle div to absolute as below when you want it to do the superscript effect.
.wrapper-div {
display: flex;
position: relative;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
background-color: red;
position: relative;
margin-right: 0;
}
.middle-div {
display: block;
width: 20px;
height: 10px;
background-color: green;
font-size: 8px;
position: absolute;
left: 25px;
top: 2px;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>

If you can't change the div structure (put the middle inside the left), you could put the wrapper in position:relative and the middle div in position:absolute instead.
It will give :
.wrapper-div {
display: inline-block;
position:relative;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
position: absolute;
left: 20px;
top: 2px;
}
Here is a Codepen: https://codepen.io/anon/pen/ePrMqv

I believe it would be more correct (and also give you less headaches) to have the "superscript" divs as subdivs like this:
<div class="left-div">
Hi
<div class="middle-div">
Hello
</div>
</div>
This would be both easier to read in code and easier to control with regard to positioning.

Don't use positioning: use negative margin.
.wrapper-div {
display: inline-block;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: red;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
background-color: green;
font-size: 8px;
margin-left: -35px;
margin-right: 0;
vertical-align: top;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>
Codepen of the difference between positioning / transform / negative margin

Related

Aligning an image to the right of text

I want to align this image to the right side of the text but I am unable to do this. All the ways I have tried but in the end, the image appears below the text contrary to what I want actually.
In my assumption, I have written the correct code.
Please see the image here.
Here is what I have in my code:
<!--Intro Page start-->
<section id="intro">
<div class="wrapper">
<div class="intro-left">
<h1>Creative Insights to Grow your Business</h1>
<p>The world's most widely deployed real-time content recomendations engine. Brought to you by Pulse Analytics.</p>
<a href="#" class="intro-cta">
Try it for Free
</a>
</div>
<div class="intro-right">
<img src="images/undraw_growth_analytics_8btt.png" alt="">
</div>
</div>
</section>
And here is the CSS:
#intro{
position: absolute;
overflow: hidden;
min-height: 600px;
padding-top: 9em;
}
#intro .intro-left{
display: inline-block;
width: 100%;
max-width: 400px;
padding: 3em 0;
}
#intro .intro-left h1{
font-size: 2.5em;
color: #241b57;
line-height: 1.5em;
position: relative;
margin-bottom: 1em;
}
#intro .intro-left h1::after{
bottom: -24px;
left: 0;
width: 50px;
height: 4px;
content: '';
border-radius: 5px;
background: #ec4357;
opacity: 0.4;
position: absolute;
}
#intro .intro-left p{
font-size: 1.125em;
line-height: 1.75em;
}
#intro .intro-left a.intro-cta{
font-weight: 500;
display: block;
width: 100%;
max-width: 180px;
margin-top: 2em;
text-align: center;
color: #ffffff;
border-radius: 3px;
background-color: #ec4357;
padding: 1em;
}
#intro .intro-right{
position: relative;
display: inline-block;
margin-left: 6em;
}
#intro .intro-right img{
max-width: 600px;
}
Please let me know where is my error. Thanks!
use flex for wrapper class:
#intro {
position: absolute;
overflow: hidden;
min-height: 600px;
padding-top: 9em;
}
.wrapper {
display: flex;
}
#intro .intro-left {
display: inline-block;
width: 100%;
max-width: 400px;
padding: 3em 0;
}
#intro .intro-left h1 {
font-size: 2.5em;
color: #241b57;
line-height: 1.5em;
position: relative;
margin-bottom: 1em;
}
#intro .intro-left h1::after {
bottom: -24px;
left: 0;
width: 50px;
height: 4px;
content: '';
border-radius: 5px;
background: #ec4357;
opacity: 0.4;
position: absolute;
}
#intro .intro-left p {
font-size: 1.125em;
line-height: 1.75em;
}
#intro .intro-left a.intro-cta {
font-weight: 500;
display: block;
width: 100%;
max-width: 180px;
margin-top: 2em;
text-align: center;
color: #ffffff;
border-radius: 3px;
background-color: #ec4357;
padding: 1em;
}
#intro .intro-right {
position: relative;
display: inline-block;
margin-left: 6em;
}
#intro .intro-right img {
max-width: 600px;
}
<section id="intro">
<div class="wrapper">
<div class="intro-left">
<h1>Creative Insights to Grow your Business</h1>
<p>The world's most widely deployed real-time content recomendations engine. Brought to you by Pulse Analytics.</p>
<a href="#" class="intro-cta">
Try it for Free
</a>
</div>
<div class="intro-right">
<img src="http://placekitten.com/301/301" alt="">
</div>
</div>
</section>

Positioning a span next to an image secondary image label

I'd like the secondary label to be right under "Image Label". Currently it is all the way at the bottom.
I am forcing the secondary label to be under using a line break and then moving it to the right using margin-left. I don't think this is the way to go at all and I tried using margin bottom which will not move the element up.
What is the best way to achieve this using CSS? My code for current result is here: https://codepen.io/codeAligned/pen/gOOByOa
Current:
Desired:
.post-container {
width: 75%;
padding-right: 16px;
padding-left: 16px;
margin-right: 200px;
margin-left: 200px;
padding-bottom: 64px;
padding-top: 64px;
article {
header {
text-align: center;
margin: 0 auto 32px;
a {
text-decoration: none;
transition: color 0.3s ease;
&:focus {
text-decoration: none;
text-decoration-skip-ink: auto;
}
&:active {
text-decoration: none;
}
&:hover {
text-decoration: none;
}
}
}
.avatar {
margin: 16px auto;
text-align: center;
border-radius: 50%;
}
}
}
.bg-img-hero {
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
margin-right: 25px;
height: 400px;
border-radius: 15px;
}
.transition-3d-hover {
transition: all 0.2s ease-in-out;
}
.transition-3d-hover:hover,
.transition-3d-hover:focus {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.story-image {
margin-bottom: 32px;
align-self: center;
img {
display: block;
border-radius: 10px;
width: 80%;
height: 60%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
}
.post-avatar {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.article-avatar {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-right: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
.tag-text {
font-size: 12px;
}
.avatar-container {
padding-left: 30px;
padding-bottom: 16px;
}
.subtitle {
font-size: 16px;
text-align: left;
}
.subtitle-container {
border-top: solid 1px;
border-bottom: solid 1px;
border-spacing: 5px;
border-color: lightgray;
min-height: 100px;
}
.subtitle-date {
padding-left: 80px;
}
.subtitle-body {
-ms-flex: 1;
flex: 1;
}
.label-position {
margin-left: 80px;
}
<div class="subtitle">
<div class="subtitle-container">
<div class="article-avatar rounded-circle sb-avatar" style="display: inline-block; vertical-align: middle; width: 60px; height: 60px; font-family: Helvetica;">
<img class="article-avatar rounded-circle sb-avatar__image" width="60px" height="60px" src="https://www.kiplinger.com/slideshow/spending/T062-S001-things-millennials-are-changing-forever/images/intro.jpg" style="max-width: 100%; width: 60px; height: 60px;"></div>
<span class="subtitle-body font-size-1 ml-3">
Image label
<br/>
<small class="label-position">secondary label</small>
</span>
</div>
</div>
I recommend using flexbox for these things. You can go through https://www.w3schools.com/css/css3_flexbox.asp
Here your code with quick fix
.subtitle-container{
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.subtitle-container >div{
padding:10px;
}
<div class="subtitle">
<div class="subtitle-container">
<div class="article-avatar rounded-circle sb-avatar" style="display: inline-block; vertical-align: middle; width: 60px; height: 60px; font-family: Helvetica;">
<img class="article-avatar rounded-circle sb-avatar__image" width="60px" height="60px" src="https://www.kiplinger.com/slideshow/spending/T062-S001-things-millennials-are-changing-forever/images/intro.jpg" style="max-width: 100%; width: 60px; height: 60px;"></div>
<div>
<span class="subtitle-body font-size-1 ml-3">
Image label
<br/>
<small class="label-position">secondary label</small>
</span>
</div>
</div>
</div>
With flex you do
<div class="container">
<div>
// your image here
</div>
<div class="label">
<div><span>Image label</span></div>
<div><small>Secondary label</small></div>
</div>
</div>
And add your css
.container {
display: flex;
}
The default direction is row so divs inside .container will stand next to each other while the divs inside .label will stack on each other because div is a block element

How can I put this make this box go below the text like in the image

I am trying to make this above layout. But unfortunately, I am not being able to put it as the above layout.
I am getting the 2nd image as my result.
Codes:
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: #fff;
background: inherit;
-webkit-background-clip: text;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
padding-left: 31% !important;
-webkit-background-clip: text;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
}
<div class="text_box_holder">
<div class="yellow_box"></div>
<h1>Consumer<br>Products<br>Consulting</h1>
LEARN MORE
</div>
Please try following code . I didn't add any back ground images . I have tried only to add 2 text with the box .
HTML
<div class="text_box_holder">
<div class="yellow_box"> </div>
<div class="text1">
<h1>Consumer<br>Products<br>Consulting</h1>
<div class="text2">LEARN MORE</div>
</div>
</div>
CSS
.text1 {
margin-top: 30px;
position:absolute;
text-align: left;
color: #bc7e09;
}
.yellow_box{
margin-left: 60px;
position: absolute;
border: 5px solid #fde428;
width: 40%;
height: 300px;
}
If you want add back ground image for whole space , you can integrate with HTML .I hope it will help you .
Demo : https://jsfiddle.net/Ltxktaad/21/
You need to provide additional wrapper divs around the the text which needs to be absolutely positioned. Here is the working example.
<div class="text_box_holder">
<div class="yellow_box"></div>
<div class="main-text-wrapper">
<h1>Consumer<br>Products<br>Consulting</h1></div><div class="link-text-wrapper">
LEARN MORE </div>
</div>
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: green;
background: inherit;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: -22px;
margin-top: 18px;
margin-bottom: 18px;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: 4px;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
margin-left: 45px;
z-index:2;
}
.main-text-wrapper {
background-color: white;
width: 40%;
height: 110px;
position:absolute;
top: 65px;
z-index: 9999;
}
.link-text-wrapper {
position:absolute;
background-color: #fff;
top: 195px;
width:40%;
height: 30px;
z-index: 9999;
}

Add an Anchor link to a Div AND its Pseudo Element (CSS or Javascript / jQuery)

I have an anchor link on a menu with an icon above it. I need it so that when someone clicks on either the menu item, or the pseudo element above it holding the icon, the link works.
I have a codepen here: http://codepen.io/emilychews/pen/wJrqaR
The red square is the pseudo element that will hold the icon.
The code is:
CSS
.menu {
position: relative;
left: 50px;
top: 50px;
height: 30px;
width: 100px;
background: blue;
line-height: 30px;
text-align: center;
}
.menu:before {
content:'';
position: absolute;
width: 100%;
height: 100%;
background: red;
bottom: 40px;
right: 0px;
}
.menu-item1 a { color: white; text-decoration: none; }
HTML
<div class="menu menu-item1">Menu Item</div>
Any help would be awesome.
Emily.
a {
position: relative;
display: inline-block;
left: 50px;
top: 50px;
height: 30px;
width: 100px;
background: blue;
line-height: 30px;
text-align: center;
color: white;
text-decoration: none;
}
a:before {
content:'icon';
position: absolute;
width: 100%;
height: 100%;
background: red;
bottom: 40px;
right: 0px;
}
<div class="menu">
Google
Yandex
</div>

Textarea gettong outside the container

Please check the below fiddle :
https://jsfiddle.net/a13nd32u/3/
<textarea rows="5" cols="50" style="width:95%;height:90%;overflow:hidden">
What's on your mind?
</textarea>
Here when I am trying to expand the textarea vertically then it box is getting outside the box. I want to implement it such that whenever the user expand the textarea vertically , the div background should also be expand with it. Can anyone please provide a solution
HTML
<div class="divv">
<textarea rows="4" cols="65"></textarea>
<h4>
space
</h4>
</div>
CSS
.divv{
background-color:green;
}
textarea {
resize: vertical;
overflow: auto;
}
JSFIddle
See if it helps
Thank you
Use This
#container {
background-color: #e6e6e6;
border-style: double;
float: left;
height: auto;
min-height: 160px;
padding-top: 5px;
width: 470px;
}
Maybe something like this? https://jsfiddle.net/aa0mkvfz/:
#container {
border-style: double;
width: 470px;
height: 160px;
background-color: #E6E6E6;
padding-top: 5px;
overflow: auto;
}
hr {
border-color: #FAFAFA;
padding: 0;
margin: 0
}
#upper_space {
color: #3b5998;
margin: 0;
padding-top: 6px;
padding-bottom: 5px;
padding-left: 10px;
}
#textbox {
background-color: white;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
overflow: auto;
}
#post_part {
display: inline;
padding: 6px 9px;
float: right;
font-size: 15px
}
select {
width: 80px;
height: 21px;
padding-right: 10px;
display: inline
}
#button1 {
display: inline;
padding-left: 10px
}
#post_button {
height: 24px;
width: 70px;
font-size: 14px;
-webkit-appearance: none;
}
All I did was add an overflow:auto; on the required divs, this creates a new block formatting context, please check this document to learn more about it:
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

Categories