How to align text in columns

  • [Moderator note: In future please use a more descriptive title]

    hi, i know this might be out of scope of wordpress forum
    but i need help with this , i explained everything screenshot below.
    <I want style in -Pic 2>

    https://i.imgur.com/Ojlx66x.png

    View post on imgur.com

    Try This Code !!! -> https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

    <!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
}
.menu li:hover {
    background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
   
   <Strong> Test text appear </strong>
      <li>Part1</li>
      <li>Part 3</li>

    </ul>
  </div>
</div>

<div class="footer">
  <p>Welcome</p>
</div>

</body>
</html>
    • This topic was modified 7 years, 2 months ago by skadiog.
    • This topic was modified 7 years, 2 months ago by Andrew Nevins.
Viewing 5 replies - 1 through 5 (of 5 total)

  • I hope you are looking for this kind of result, please let me know if this solution make sense.

    <!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
}
.menu li:hover {
    background-color: #0099cc;
}
.containerMenu {
    display:flex;
}

.containerMenu #m1
{
   order:1;
   margin-right:20px;
}
.containerMenu #m3
{
   order:2;
   margin-right:20px;
}
.containerMenu #txt {
    order: 3;
    padding: 8px;
    margin-bottom: 8px;
}

</style>
</head>
<body>

<div class="header">
</div>

<div class="clearfix">
  <div class="column menu">
    <ul class="containerMenu">
   
   <Strong id="txt"> Test text appear </strong>
      <li id="m1">Part1</li>
      <li id="m3">Part 3</li>

    </ul>
  </div>
</div>

<div class="footer">
  <p>Welcome</p>
</div>

</body>
</html>
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Use a grid plugin: https://www.ads-software.com/plugins/search/grid/

    Thread Starter skadiog

    (@skadiog)

    thanks for reply!
    (update) how can i do like this? please reply

    View post on imgur.com

    • This reply was modified 7 years, 2 months ago by skadiog.
    Thread Starter skadiog

    (@skadiog)

    updated post- help me please

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @skadiog, Please don’t bump. You don’t have a WordPress question, so you could ask this on a forum other than www.ads-software.com if you’re not satisfied with the support here.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to align text in columns’ is closed to new replies.