Elxis CMS Forum

Support => General => Topic started by: armpouniotis on August 18, 2021, 01:28:02

Title: How to display divs vertically ?
Post by: armpouniotis on August 18, 2021, 01:28:02: Hi there !

I want to display two (2) different divs vertically, inside a parent div.

Does anybody know how to do it ?

e.g.

HTML:

<div class="leftParent">
<div class="leftDown1"</div>
<div class="leftDown2"</div>
</div>

So, css should be something like... ???

.leftParent{
width: 300px;}

.leftDown1{
}

.leftDown2{
}

Any help ?

thank you in advance
Christos
Title: Re: How to display divs vertically ?
Post by: datahell on August 18, 2021, 19:38:34: A DIV element is by default a BLOCK element (display:block) so if you put 2 DIVs side by side they will be displayed the first on top and the second below. So, it does what you need by default!

Example: <div>A</div><div>B</div>
The result will be:
A
B

Tip: A block element by default occupies the whole width if its parent element (width:100%). The DIVs height is controlled by default by its contents (height:auto). So, in the example above the first DIV (A) occupies the whole row (with:100%,) so the second (B) doesn't fit to the same row and this is why it gets displayed on the next row (below A).

If I didn't understood what exactly you want to do, please re-phrase your question.
Title: Re: How to display divs vertically ?
Post by: armpouniotis on August 18, 2021, 20:18:07: Hi !

check this:

<div class="mainLeft">

<div class="tpl5_menu_wrap">
         <a class="tpl5_mobmenu" href="javascript:void(null);" onclick="tpl5OpenMenu();" title="<?php echo $eLang->get('MENU'); ?>">
         <i class="fas fa-bars"></i>
         </a>
         <nav class="tpl5_menu" id="tpl5_menu">
         <a class="tpl5_mobmenuclose" href="javascript:void(null);" onclick="tpl5CloseMenu();" title="<?php echo $eLang->get('CLOSE'); ?>">
         <i class="fas fa-times"></i>
         <span> <?php echo $eLang->get('CLOSE'); ?></span>
         </a>
         <?php $eDoc->modules('menu','none'); ?>
         <div class="clear"></div>
         </nav>
      </div>
<div class="mainLeft2"><?php $eDoc->modules('left'); ?></div>
</div>

css is this:

.mainLeft{
   width: 25%;
   float: left;}

.tpl5_menu_wrap{
   margin: 0;
   padding: 0;
   width: 100%;
   display: block;}

.mainLeft2{
   display: block;
   float: left;}

Unfortunately, the modules of ".mainLeft2" cover the menu of ".tpl5_menu_wrap".

In other words, the menu is covered by the .mainLeft2 div....

If you think it is difficult to understand, I can tell you the website, to see how it loooks....

Christos
Title: Re: How to display divs vertically ?
Post by: datahell on August 18, 2021, 20:34:27: "mainLeft" limits the menu to 25% width. And you have 2 floated elements. This is what you want to do? I guess not. You want to display the "mainLeft" element below the menu.

I advice you to change your html to this:

<div class="tpl5_menu_wrap">
<a class="tpl5_mobmenu"></a>
<nav class="tpl5_menu" id="tpl5_menu">...</nav>
</div>
<div class="mainLeft"><?php $eDoc->modules('left'); ?></div>

And your CSS:
.mainLeft: { /* nothing required */ }

TIP: When we set an element as "float" the next element wraps around it. Only the first must be float. The floated element MUST have a specified width. If we don't want a third, fourth, etc, element to wrap around the float element then we usually add a "clearfix" at the end. Today no special HTML is required for clearfix, as we do it width CSS.

If this not want you to do (display the modules below the menu) want tell me what you want to do in order to guide you properly.

Example:
<div class="wrapper">
<div class="side">A</div>
<div class="main">B</div>
</div>

And the CSS:
.wrapper::after {content: ''; display: table; clear: both; }
.side { float: left; width: 25%; background: yellow; }
.main { margin-left: 25%; background: orange; }

Tip 1: In most cases now-days it is better to use flex than floats.
Tip 2: Be aware of margins and paddings especially when using box-sizing: content-box
Title: Re: How to display divs vertically ?
Post by: armpouniotis on August 18, 2021, 20:50:22: Actually, I have ".main" as a parental div.

mainLeft div is at 25%, and mainRight at 75% (I didn't mention it here....)

At the mainLeft, I want to display the vertical menu (tpl5_menu_wrap), and below that I want to display banners (mainLeft2)

mainRight has component(); which is ok.

Unfortunately, at mainLeft, banners cover the vertical menu....
Title: Re: How to display divs vertically ?
Post by: datahell on August 18, 2021, 20:53:05: You set float and width only to the first element. "mainRight " should not be floated or have a specified width. But it can have an opposite (left) margin which helps when the second divs wraps. In your example .mainRight { margin-left:25%; }

See my example above.