1 Replies - 267 Views - Last Post: 14 September 2017 - 05:58 PM

#1 Reivaxor  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 13-September 17

How to make div box with text description

Posted 13 September 2017 - 05:54 AM

hi i need help with this , i want to make div box with text beside it like screenshot below. i cant figure out how to do this.


Try this code- https://www.w3school...e=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;
    }
    .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>




picture is here - https://i.imgur.com/OP6AsLD.png

Is This A Good Question/Topic? 0
  • +

Replies To: How to make div box with text description

#2 brep  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 23
  • View blog
  • Posts: 175
  • Joined: 26-August 11

Re: How to make div box with text description

Posted 14 September 2017 - 05:58 PM

It looks like you've already got it. If you duplicate what you already have, namely this part:
<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>


You get this:
Posted Image

Which means you succeeded in achieving your desired effect, unless I misunderstood you.

This post has been edited by brep: 14 September 2017 - 05:59 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1