Welcome,
Guest
.
Please
login
or
register
.
Did you miss your
activation email
?
News:
Download Elxis CMS:
Elxis 5.5 Hermes
.
Home
Help
Login
Register
Elxis CMS Forum
»
Support
»
General
(Moderators:
Ivan Trebješanin
,
Farhad Sakhaei
) »
How to display divs vertically ?
« previous
next »
Print
Pages: [
1
]
Author
Topic: How to display divs vertically ? (Read 2719 times)
armpouniotis
Sr. Member
Posts: 377
How to display divs vertically ?
«
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
Logged
Christos Armpouniotis
datahell
Elxis Team
Hero Member
Posts: 10353
Re: How to display divs vertically ?
«
Reply #1 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.
«
Last Edit: August 18, 2021, 19:44:56 by datahell
»
Logged
Elxis Team
|
Is Open Source
|
IOS Rentals | IOS AERO
armpouniotis
Sr. Member
Posts: 377
Re: How to display divs vertically ?
«
Reply #2 on:
August 18, 2021, 20:18:07 »
Hi !
check this:
<div class="mainLeft">
<!-- tpl5_menu_wrap div -->
<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
Logged
Christos Armpouniotis
datahell
Elxis Team
Hero Member
Posts: 10353
Re: How to display divs vertically ?
«
Reply #3 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
«
Last Edit: August 18, 2021, 20:55:42 by datahell
»
Logged
Elxis Team
|
Is Open Source
|
IOS Rentals | IOS AERO
armpouniotis
Sr. Member
Posts: 377
Re: How to display divs vertically ?
«
Reply #4 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....
«
Last Edit: August 18, 2021, 20:52:58 by armpouniotis
»
Logged
Christos Armpouniotis
datahell
Elxis Team
Hero Member
Posts: 10353
Re: How to display divs vertically ?
«
Reply #5 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.
«
Last Edit: August 18, 2021, 20:55:25 by datahell
»
Logged
Elxis Team
|
Is Open Source
|
IOS Rentals | IOS AERO
Print
Pages: [
1
]
« previous
next »
Elxis CMS Forum
»
Support
»
General
(Moderators:
Ivan Trebješanin
,
Farhad Sakhaei
) »
How to display divs vertically ?