Move element using css alone

Question

For some reasons i can't edit this below mentioned code (Since it's generated by a Wordpress Plugin) i can only control and make changes to it via CSS so my question is Can i make my elements e1 and e2 parallel to each other? side by side? by using CSS alone?

<div class="layer-content">
<a target="_self" class="element element_0 title_link" href="http://example.com/wordpress/index.php/2018/07/23/student/">STUDENT 1’S NEW</a>


<div id="e1" class="element element_1 author">admin</div> // Element1
<div id="e2" class="element element_2 post_date">July 23, 2018</div> // element2


<div class="element element_3 excerpt">Nick is a Sophomore</div>
<div class="element element_4 categories"><a href="http://example.com/wordpress/index.php/category/music-videos/" title="IDEOS">VIDEOS</a> 
</div>
</div>

Yes, you can. You can use floats for that, for example...

Krzysiek Dróżdż
– Krzysiek Dróżdż

2018-07-24 22:17:23 +00:00
Commented Jul 24, 2018 at 22:17 — Krzysiek Dróżdż
– Krzysiek Dróżdż, Commented Jul 24, 2018 at 22:17

junkrig · Accepted Answer · 2018-07-25 02:39:06Z

1

As mentioned by @Krzysiek Drozdz you can use floats.

Here is an example: https://codepen.io/junkrig/pen/bjRgdO

.element_1 {
    float: left;
    height: 100px;
    width: 200px;
}
.element_2 {
    margin-left: 200px;
    height: 100px;
}

You will just need a

<br />

or container div to move them under the title "STUDENT 1’S NEW". For example:

<div class="container">
    <div id="e1" class="element element_1 author">admin</div> 
    <div id="e2" class="element element_2 post_date">July 23, 2018</div> 
</div>

You can use percentages instead for the width / margin-left values, for example:

.element_1 {
    float: left;
    height: 100px;
    width: 20%;
}
.element_2 {
    margin-left: 20%;
    height: 100px;
}

answered Jul 25, 2018 at 2:39

junkrig

3233 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user10145552 · Accepted Answer · 2018-07-28 00:44:08Z

Yes you can try this:

.layer-content{
  width: 200px;
  height:auto;
  position:relative;
  overflow:hidden;
}
.layer-content .container{
  width:100%;
  height:auto;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(0,0,0,0.1);
}
.layer-content .container #e1{
  width:50%;
  float:left;
  position:relative;
  text-align:center;
  padding:5px;
  box-sizing:border-box;
}
.layer-content .container #e2{
  width:50%;
  float:right;
  position:relative;
  text-align:center;
  padding:5px;
  box-sizing:border-box;
  background-color:#4bbfee;
  color:#fff;
}

<div class="layer-content">
  <a target="_self" class="element element_0
  title_link"href="http://example.com/wordpress/index.php/2018/07/23/student/">STUDENT 1’S NEW</a>


  <div class="container">
    <div id="e1" class="element element_1 author">admin</div>
    <div id="e2" class="element element_2 post_date">July 23, 2018</div>
  </div>


  <div class="element element_3 excerpt">Nick is a Sophomore</div>
  <div class="element element_4 categories"><a      href="http://example.com/wordpress/index.php/category/music-videos/"      title="IDEOS">VIDEOS</a> 
  </div>
</div>

Collectives™ on Stack Overflow

Move element using css alone

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related