Not able to create three columns using CSS

Question

I am having a hard time to align the content. I am trying to create three columns and I understand I can use bootstrap but for the meantime, I would like to do the following style like this site:

The following is the css and html code:

.img-banner {
  margin-left: auto;
  margin-right: auto;
  display: inline;
}
body {
  position: relative;
  background-color: white;
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  color: white;
  text-decoration: none;
  font-family: Sherwood !important;
}
h6 {
  color: blue;
  font-family: Trade Gothic LT Std !important;
}
.navbar-buttons {
  padding-top: 20px;
  padding-right: 20px;
  text-align: right;
  list-style: none;
  margin: 0 auto;
  overflow: hidden;
}
#wrapper {
  width: 940px;
  height: 100%;
  margin: 0 auto;
}
#banner-wrapper {
  display: block;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  background: #FFF;
  background-image: url(./img/Banner.jpg);
  background-repeat: no-repeat;
  padding-bottom: 83px;
}
#content-wrapper {
  clear: both;
  margin: 0;
  padding: 0;
}
img.no-border {
  border: 0;
}
.img-banner {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#main {
  float: left;
  padding: 0;
  width: 50%;
  margin-left: 15px;
}
#sidebarleft {
  width: 30%;
  padding-top: 30px;
  padding-right: 20px;
  display: inline;
  float: left;
}
#sidebarleft ul.menu {
  list-style: none;
  padding: 0;
  margin: 10px 0 10px 0;
}
.leftbuttons1 {
  background-image: url(./img/Button_1.jpg);
  background-repeat: no-repeat;
  padding: 5px 10px 10px;
}
.leftbuttons1 a {
  color: grey;
  font-size: 10pt !important
}
.leftbuttons {
  background-image: url(./img/Button_1.jpg);
  background-repeat: no-repeat;
  padding: 5px 0 10px 10px;
}
.leftbuttons a {
  color: grey;
  font-size: 10pt !important;
}
.leftbuttons2 {
  background-image: url(./img/Button_2.jpg);
  background-repeat: no-repeat;
  padding: 7px 0 10px 7px;
}
.leftbuttons2 a {
  color: grey;
  vertical-align: center;
  font-size: 10pt !important;
}
#sidebarright {
  float: right;
  width: 30%;
  padding: 0;
  margin: 0;
  padding-top: 20px;
}
#sidebarright a {
  color: grey;
  font-size: 10pt !important;
}
.rightbuttons {
  background-image: url(./img/Button.jpg);
  background-repeat: no-repeat;
  padding: 14px 0 20px 11px;
  text-decoration: none;
}
.rightbuttons2 {
  background-image: url(./img/Resources_Button.jpg);
  background-repeat: no-repeat;
  padding: 14px 0 20px 11px;
}
.rightbuttonsAlert {
  background-image: url(./img/Button.jpg);
  background-repeat: no-repeat;
  padding: 14px 0 20px 11px;
}
.rightbuttonsAlert a {
  color: red !important;
}
.rightbuttonsDir {
  background-image: url(./img/Button.jpg);
  background-repeat: no-repeat;
  padding: 14px 0 20px 11px;
}
img.buttonUlti {
  float: right;
  padding-top: 15px;
  padding-bottom: 15px;
}
.shiftRes {
  margin-left: 27px;
  padding-top: 40px;
}
.departstyle {
  font-size: 18px !important;
  font-weight: bold;
  padding-left: 10px;
  margin: 0 0 7px 0;
}
.resstyle {
  font-size: 18px !important;
  font-weight: bold;
  text-align: left;
  padding-left: 15pt;
  margin: 0 0 7px 0;
}

<div id="wrapper">
  <!-- banner-wrap starts here -->
  <div id="banner-wrapper">
    <!-- Menu Tabs -->

    <ul>
      <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Resources.cfm"><span>Support</span></a>
      </li>

    </ul>
  </div>
  <div id="content-wrapper">
    <div id="sidebarright">
      <a href="#">
        <img class="buttonUlti" src="img/UPro.jpg" alt="UPro" />
      </a>
      <table width="100%;">
        <tbody>
          <tr>
            <th class="resstyle">Resources</th>
          </tr>
          <tr>
            <td class="rightbuttons spacetd"><a href="Form.cfm">Forms</a>
            </td>
            <td class="rightbuttons spacetd2"><a href="Postings.cfm">Postings</a>
            </td>
          </tr>
          <tr>
            <td class="rightbuttons spacetd"><a href="Locations.cfm">Locations</a>
            </td>
            <td class="rightbuttons spacetd"><a href="Comp.cfm">Comp</a>
            </td>
          </tr>
          <tr>
            <td class="rightbuttons spacetd"><a href="Care.cfm">Urgent Care</a>
            </td>
            <td class="rightbuttons spacetd"><a href="Photos.cfm">Event Photos</a>
            </td>
          </tr>
          <tr>
            <td class="rightbuttons spacetd"><a href="Safety.cfm">Education</a>
            </td>
            <td class="rightbuttonsDir spacetd"><a href="Directory.cfm"> Directory</a>
            </td>
          </tr>
          <tr>
            <td class="rightbuttonsAlert spacetd"><a href="Alerts.cfm">Alerts</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!---Body of Page--->
    <div id="main">
      <h6>Blah</h6>

      <p></p>
    </div>
    <div id="sidebarleft">
      <ul class="menu">
        <li class="departstyle">Departments</li>
        <li class="leftbuttons1"><a href="ClmResources_R.cfm">Claims</a>
        </li>
        <li class="leftbuttons"><a href="Credentialing.cfm?">Credentialing</a>
        </li>
        <li class="leftbuttons"><a href="Customer_Services.cfm">Customer Services</a>
        </li>
        <li class="leftbuttons"><a href="Data_Management.cfm">Data Management</a>
        </li>
        <li class="leftbuttons"><a href="Decision_Support.cfm">Decision Support</a>
        </li>
        <li class="leftbuttons"><a href="Employee_Services.cfm">Employee Services</a>
        </li>
        <li class="leftbuttons"><a href="Finance.cfm">Finance</a>
        </li>
        <li class="leftbuttons"><a href="HCC.cfm">HCC</a>
        </li>
        <li class="leftbuttons2"><a href="HSEC.cfm">Health System <br />Engagement and<br /> Contracting</a>
        </li>
        <li class="leftbuttons"><a href="Mail_Room.cfm" target="_blank">Mail Room</a>
        </li>
        <li class="leftbuttons"><a href="Marcom.cfm">Marcom</a>
        </li>
        <li class="leftbuttons"><a href="Medical_Management.cfm">Medical Management</a>
        </li>
        <li class="leftbuttons"><a href="Network_Management.cfm">Network Management</a>
        </li>
        <li class="leftbuttons"><a href="NextGen.cfm">NextGen</a>
        </li>
        <li class="leftbuttons"><a href="Operations.cfm">Operations</a>
        </li>
        <li class="leftbuttons"><a href="Physician_Resources.cfm">Physician Resources</a>
        </li>
        <li class="leftbuttons"><a href="Provider_Relations.cfm">Provider Relations</a>
        </li>
        <li class="leftbuttons"><a href="Quality_Management.cfm">Quality Management</a>
        </li>
        <li class="leftbuttons"><a href="Improvement.cfm">Improvement</a>
        </li>
        <li class="leftbuttons"><a href="Improvement.cfm"> Management</a>
        </li>
      </ul>
    </div>
  </div>
  <!---Content-wrapper ends--->

Update:

I have done the Flex box but not sure what I am doing wrong. I followed the example provided and I was able to do the simple one but when I try to adjust the padding, it goes wrong I add the same structure as the previous code to separate the info in columns but it isn't working. Here are the results when I use the flexbox:

As you can see, I am not able to get the buttons images for the links to appear and the spacing and margins and padding are everywhere.

Here is my css code and html code. Any help would be appreciated, thanks

CSS:

.img-banner{
    margin-left:auto;
    margin-right:auto;
    display:inline;
}

img.no-border{border: 0;}

body{
    position:relative;
    background-color:white;
    margin: 0;
    padding: 0;
}

ul{
    list-style:none;
}

a{  
    color: white;
    text-decoration: none;
    font-family: Sherwood !important;
}

h6{
    color:blue;
    font-family: Trade Gothic LT Std !important;
}


.navbar-buttons{
    padding-top:20px;
    padding-right:20px;
    text-align:right;
    list-style:none;
    margin:0 auto;
    overflow:hidden;
}

#wrapper {
    width: 940px;
    height:100%;
    margin: 0 auto;
 }

#banner-wrapper{
    display:block;
    padding:0;
    margin-left:auto;
    margin-right:auto;
    background:#FFF;
    background-image: url(./img/Banner.jpg);
    background-repeat: no-repeat;
    padding-bottom:83px;
}

#content-wrapper{
    clear:both;
    margin:0;
    padding:0;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 940px;
    height: auto;
    background-color: lightgrey;
}

.flex-item {
    width:380px;
    margin-left:-40px;
}

.flex-item a{
    color:grey !important;
    font-size:10pt !important;

}

.leftbuttons1{
    background-image: url(./img/Buttons1.jpg);
    background-repeat:no-repeat;
    padding:  5px 10px 10px;
}

.leftbuttons1 a{
    color:grey; 
    font-size:10pt !important;
}

.leftbuttons{
    background-image: url(./img/Buttons1.jpg);
    background-repeat:no-repeat;
    padding: 5px 0 10px 10px;
}

.leftbuttons a{
    color:grey; 
    font-size:10pt !important;
}

.leftbuttons2{
    background-image: url(./img/Buttons2.jpg);
    background-repeat:no-repeat;
    padding: 7px 0 10px 7px;
}

.leftbuttons2 a{
    color:grey;
    vertical-align:center;
    font-size: 10pt !important;
}

.rightbuttons{
    background-image: url(./img/Button.jpg);
    background-repeat:no-repeat;
    padding:  14px 0 20px 11px;
    text-decoration:none;
}
.rightbuttons2{
    background-image: url(./img/Button.jpg);
    background-repeat:no-repeat;
    padding:  14px 0 20px 11px;
}

.rightbuttonsAlert{
    background-image: url(./img/Button.jpg);
    background-repeat:no-repeat;
    padding:  14px 0 20px 11px;
}
.rightbuttonsAlert a{
    color:red !important;
}

.rightbuttonsDir{
    background-image: url(./img/Button.jpg);
    background-repeat:no-repeat;
    padding:  14px 0 20px 11px;
}

img.buttonUlti{
    float:right;
    padding-top:15px;
    padding-bottom:15px;
}

.shiftRes{
    margin-left:27px;
    padding-top:40px;
}

.departstyle{
    font-size: 18px !important;
    font-weight:bold;
    padding-left: 10px;
    margin: 0 0 7px 0;
}

.resstyle{
    font-size: 18px !important;
    font-weight:bold;
    text-align:left;
    padding-left:15pt;
    margin: 0 0 7px 0;
}

HTML:

<div id="wrapper">          
    <!-- banner-wrap starts here -->
    <div id="banner-wrapper">                                       
                <!-- Menu Tabs -->

            <ul>
                <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="ITResources.cfm"><span>Support</span></a></li>

            </ul>
    </div>
    <div class="flex-container">
        <div class="flex-item">
            <ul class="menu">
                <li class="departstyle">Departments</li>
                <li class="leftbuttons1"><a href="#.cfm">Claims</a></li>
                <li class="leftbuttons"><a href="#.cfm?">Credential</a></li>
                <li class="leftbuttons"><a href="#.cfm">Customer </a></li>
                <li class="leftbuttons"><a href="#">Decision </a></li>
                <li class="leftbuttons"><a href="#.cfm">Employee </a></li>
                <li class="leftbuttons"><a href="#.cfm">Finance</a></li>
                <li class="leftbuttons"><a href="#.cfm">HCC</a></li>
                <li class="leftbuttons2"><a href="#.cfm">Health System <br />Engagement <br /> </a></li>    
                <li class="leftbuttons"><a href="#.cfm">Marcom</a></li>
                <li class="leftbuttons"><a href="#.cfm">Medical </a></li>
                <li class="leftbuttons"><a href="#.cfm">Network </a></li>
                <li class="leftbuttons"><a href="#.cfm">NextGen</a></li>
                <li class="leftbuttons"><a href="#.cfm">Operations</a></li>
                <li class="leftbuttons"><a href="#.cfm">Physician </a></li>
                <li class="leftbuttons"><a href="#.cfm">Provider </a></li>
                <li class="leftbuttons"><a href="#.cfm">Quality </a></li>
                <li class="leftbuttons"><a href="#.cfm">Risk </a></li>          
            </ul>
        </div>
        <div class="flex-item">
            <h6>Blah</h6>
            <p></p>
        </div>
        <div class="flex-item">
        <a href="https://n11.ultipro.com/logout.aspx"><img class="buttonUlti" src="img/UltiPro.jpg" alt="UltiPro" /></a>
            <table width="100%;">
                <tbody>
                    <tr>
                        <th class="resstyle">Resources</th>
                    </tr>
                    <tr>
                        <td class="rightbuttons spacetd"><a href="Form.cfm"> Forms</a></td>
                        <td class="rightbuttons spacetd2"><a href=Postings.cfm">Postings</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons spacetd"><a href="Locations.cfm"> Locations</a></td>
                        <td class="rightbuttons spacetd"><a href="Compliance.cfm">Compliance</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons spacetd"><a href="Care.cfm">Care</a></td>
                        <td class="rightbuttons spacetd"><a href="Photos.cfm">Photos</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons spacetd"><a href="Safety.cfm">Safety</a></td>
                        <td class="rightbuttonsDir spacetd"><a href="Directory.cfm">Directory</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttonsAlert spacetd"><a href="Alerts.cfm">Alerts</a></td>
                    </tr>
                </tbody>
            </table>        
        </div>
    </div>

Any help would be appreciated

You have only included the left sidebar code. Please provide code for the middle and right content. — A.Sharma
– A.Sharma, Commented Jun 27, 2016 at 20:51
A.Sharma, I have included the code. Main is the middle content and the right hand side is sidebarright — Roberto Flores
– Roberto Flores, Commented Jun 27, 2016 at 21:08

Mike · Accepted Answer · 2016-06-29 17:04:40Z

Ok I see a couple of problems here:

1) You want 3 columns and are setting them by percentage: #sidebarright: 30%, #main: 50% and #sidebarleft: 30%, all of them add up to 110%, thats more than 100% and the #sidebarleft column will position itself on the bottom because of this.

2) #sidebarleft has a right padding which add up to the percentage unless you set its box-sizing to border-box.

#sidebarleft {
  width: 30%;
  padding-top: 30px;
  padding-right: 20px;
  display: inline;
  float: left;
  box-sizing: border-box; /* add this line, or remove the right padding */
}

3) #main has a left margin that pushes the column to the right (this also add up to the total available space), remove it so that it looks like this:

#main {
  float: left;
  padding: 0;
  width: 40% /* changed the width here */
}

4) Finally reorder the HTML columns so that they look like this (floats take into account the order that you have the elements):

...
<div id="content-wrapper">
    <div id="sidebarleft">...</div>
    <div id="main">...</div>
    <div id="sidebarright">...</div>
</div>
...

I think you should really look into using flexbox for this, it will help you alot with these sort of things.

UPDATE

The problem that you are having is that with the provided code I dont see any padding set, plus you are setting a negative margin to remove the the .menu margin. All ul and ol tags set their own margin by default, remove any margins and/or paddings:

ul{
  list-style:none;
  margin: 0;
  padding: 0;
}

That should fix the first part, and after that, add a padding to all your columns like:

.flex-item {
   width:380px;
   /*margin-left:-40px; remove this */
   padding: 20px; /* added the padding to the column */
}

And you have the padding correctly set there.

cross19xx · Accepted Answer · 2016-06-27 21:03:20Z

0

I am not really a fan of using tables as a way of creating columns. But if you are looking for a really simple way... I recommend using floats inside a parent container

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

.parent > div {  /* I prefer this but you can simply write '.parent > *' if you want to use all columns */
  display: block;
  width: 33%;
  float: left;
  min-height: 30px;
}

#child1 { background-color: #CE1126; }
#child2 { background-color: #FCD116; }
#child3 { background-color: #006B3F; }

<div class="parent">
  <div id="child1">I am the first child</div>
  <div id="child2">I am the second child</div>
  <div id="child3">I am the third child</div>
</div>

Forgive the overuse of colors, but that's my nation's flag. Hope this helps

answered Jun 27, 2016 at 21:03

cross19xx

3,5072 gold badges28 silver badges41 bronze badges

1 Comment

Roberto Flores Over a year ago

No problem and I am not a fan of columns either and so I was trying to not to go that route

Rohit · Accepted Answer · 2016-06-27 21:05:22Z

0

You can try CSS3 FlexBox. Basic example shown below:

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

answered Jun 27, 2016 at 21:05

Rohit

1,8161 gold badge11 silver badges17 bronze badges

4 Comments

Roberto Flores Over a year ago

Rohit: Thanks, I have not heard of this css3 class. Thanks for the extra knowledge, I will try this as well

Roberto Flores Over a year ago

Question: Would I be able to create 2 different flex-containers?

Rohit Over a year ago

Yes, why not. but why do you want to create in your case?

Roberto Flores Over a year ago

I having a hard time to link the css file with the coldfusion file so for the meantime I just want to get an idea how will look and once I figure out the issue, I will use bootstrap but so far it is coming out alright

A.Sharma · Accepted Answer · 2016-06-27 21:16:13Z

0

Switch sidebarleft and sidebarright in your HTML. You do not need floats so remove the float:right on sidebarrright. I couldn't find this float in all of the code so I just got lazy and removed it in the CSS. Just set display:inline-block to all 3 divs and you can set the padding and margins as you see fit:

#sidebarright, #main, #sidebarleft{
  display:inline-block;
  width:auto; //change this how you need
  border:1px solid blue;
  margin:30px;
}

#sidebarright{
  float:none;
}

Here's a fiddle: https://jsfiddle.net/wnLw1kwu/1/

If you want a more mobile responsive solution, either use Bootstrap or use Flexbox as provided in the other answer(s).

answered Jun 27, 2016 at 21:16

A.Sharma

2,7991 gold badge14 silver badges24 bronze badges

Collectives™ on Stack Overflow

Not able to create three columns using CSS

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related