div positioning...

The code I have, produces the image below.

Question: How can I modify my css to position the following div tags as shown on the right side of the image?
- company
-city
-workDescription
I have tried float:left; after these div tags, but I haven't been able to get what I am looking for.
move
<!DOCTYPE html>
<head runat="server">
    <title>Resume- Mike Eghtebas</title>
    <link rel="stylesheet" type="text/css" href=".\styles\resume.css"/>
</head>
<body>
    <form id="form1" runat="server">
 <body>
   <div class="wrapper">
      <div class="header clearfix">
            <div class="left-col contact">
               <span class="contactBlue">Contact:</span><br>
               <span>email: Meghtebas@gmail.com</span><br>
               <span>Phone: (949) 533-8239</span><br>
            </div><!--<div class="left-col contact">-->
            <div class="right-col nameBlock">
              <span class="name">Mike M Eghtebas</span><br>
              <span class="title">Database Application Developer</span>
            </div><!--<div class="right-col nameBloc">-->
      </div> <!--<div class="header clearfix">-->      
       <div class="horizontalGap">&nbsp;</div>   
      <div class="content">
            <div class="left-col">left col</div>
            <div class="right-col">
                <div class="skills">
                    skills
                </div><!--<div class="skills">-->
                <div class="skillsDescription">
                    skills Description
                </div><!--<div class="skillsDescription">-->  
                <div class="experience">
                    experience
                </div><!--<div class="experience">-->  
                <div class="date">
                    08/2014 Present
                </div><!--<div class="date">--> 
                <div class="company">
                    company
                </div><!--<div class="company">--> 
                <div class="city">
                    city
                </div><!--<div class="city">--> 
                <div class="workDescription">
                    workDescription
                </div><!--<div class="workDescription">--> 
            </div><!--<div class="header clearfix">-->  
      </div><!--<div class="content">-->
      <div class="footer"></div>
    </div><!--<div class="wrapper">-->
    </form>
</body>
</html>
------css----------
*{
    box-sizing:border-box;
}
/* Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
 Source: http://nicolasgallagher.com/micro-clearfix-hack/
*/

.clearfix:before,
.clearfix:after{
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
body{
    background-color:rgb(238,238,238);
    font-family:"Tahoma","sans-serif";
    font-size:100%;
}
.wrapper{
   margin:0 auto; 
   padding: 2em 2em 3em 2em;
   width: 70%;
   height:350px;
   background-color:white;
   -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
   -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.horizontalGap{
   margin:0 auto; 
   padding: 0 2em 0 2em;
   width: 100%;
   border: 1px solid black;
   background-color:white;
   height:.6em;
}
.left-col, .right-col{
    border: 1px solid black;
    float:left;
}
.left-col{
    width:28%;
    margin-right:2%;
}
.right-col{
    width:70%;
}
.date{
    width:15%;
	border: 1px solid blue;
}
.company{
    width:65%;
	border: 1px solid blue;
}
.city{
    width:30%;
	border: 1px solid blue;
}
.workDescription{
    width:85%;
	border: 1px solid blue;
}
.skills ,.skillsDescription, .experience{
    width:100%;
	border: 1px solid blue;
}

.contact{
	color:rgb(89,89,89);
	text-align:right;
	white-space: nowrap;
	height:4em;
}
.contactBlue{
  font-size:1.1em;
  font-weight:bold;
  white-space: nowrap;
  color:rgb(84,142,212);
}
.nameBlock{
  text-align:center;
  height:4em;
}
.name{
  font-size:1.3em;
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
}
.title{
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
}

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mike EghtebasDatabase and Application DeveloperAuthor Commented:
After the above post, I have included a new div (shown in green) thinking this might be necessary to have these div tags in the position discussed above:
newdiv
<!DOCTYPE html>
<head runat="server">
    <title>Resume- Mike Eghtebas</title>
    <link rel="stylesheet" type="text/css" href=".\styles\resume.css"/>
</head>
<body>
    <form id="form1" runat="server">
 <body>
   <div class="wrapper">
      <div class="header clearfix">
            <div class="left-col contact">
               <span class="contactBlue">Contact:</span><br>
               <span>email: Meghtebas@gmail.com</span><br>
               <span>Phone: (949) 533-8239</span><br>
            </div><!--<div class="left-col contact">-->
            <div class="right-col nameBlock">
              <span class="name">Mike M Eghtebas</span><br>
              <span class="title">Database Application Developer</span>
            </div><!--<div class="right-col nameBloc">-->
      </div> <!--<div class="header clearfix">-->      
       <div class="horizontalGap">&nbsp;</div>   
      <div class="content">
            <div class="left-col">left col</div>
            <div class="right-col">
                <div class="skills">
                    skills
                </div><!--<div class="skills">-->
                <div class="skillsDescription">
                    skills Description
                </div><!--<div class="skillsDescription">-->  
                <div class="experience">
                    experience
                </div><!--<div class="experience">--> 
                <div class="experience"> 
                    <div class="date"><!-- -------------------------------SWAPE------------------------- -->
                        08/2014 Present
                    </div><!--<div class="date">--> 
                    <div class="company"> 
                        SWAPE
                    </div><!--<div class="company">--> 
                    <div class="city">
                        city
                    </div><!--<div class="city">--> 
                    <div class="workDescription">
                        workDescription
                    </div><!--<div class="workDescription">-->
                </div>
                <div class="date"><!-- -------------Kaiser Permanente Performance Dashb-------------- -->
                    08/2014 Present
                </div><!--<div class="date">--> 
                <div class="company"> 
                    Kaiser Permanente
                </div><!--<div class="company">--> 
                <div class="city">
                    city
                </div><!--<div class="city">--> 
                <div class="workDescription">
                    workDescription
                </div><!--<div class="workDescription">-->
                               <div class="date"><!-- ---------------------Warner Brothers ------------------------- -->
                    08/2014 Present
                </div><!--<div class="date">--> 
                <div class="company"> 
                    Warner Brothers
                </div><!--<div class="company">--> 
                <div class="city">
                    city
                </div><!--<div class="city">--> 
                <div class="workDescription">
                    workDescription
                </div><!--<div class="workDescription">-->
                               <div class="date"><!-- ------------Kaiser Permanente Decision Support App.-------------------- -->
                    08/2014 Present
                </div><!--<div class="date">--> 
                <div class="company"> 
                    Kaiser Permanente
                </div><!--<div class="company">--> 
                <div class="city">
                    city
                </div><!--<div class="city">--> 
                <div class="workDescription">
                    workDescription
                </div><!--<div class="workDescription">-->
                               <div class="date"><!-- ------------------SWAPE, Environmental Consultants--------------- -->
                    08/2014 Present
                </div><!--<div class="date">--> 
                <div class="company"> 
                    SWAPE
                </div><!--<div class="company">--> 
                <div class="city">
                    city
                </div><!--<div class="city">--> 
                <div class="workDescription">
                    workDescription
                </div><!--<div class="workDescription">-->
                               <div class="date"><!-- -------------------AIG SunAmerica------------------------ -->
                    08/2014 Present
                </div><!--<div class="date">--> 
                <div class="company"> 
                    AIG
                </div><!--<div class="company">--> 
                <div class="city">
                    city
                </div><!--<div class="city">--> 
                <div class="workDescription">
                    workDescription
                </div><!--<div class="workDescription">-->      
                <div class="date"><!-- -------------------------Some Other Companies Worked for------------------ -->
                    08/2014 Present
                </div><!--<div class="date">--> 
                <div class="company"> 
                    Some Other Companies
                </div><!--<div class="company">--> 
                <div class="city">
                    city
                </div><!--<div class="city">--> 
                <div class="workDescription">
                    workDescription
                </div><!--<div class="workDescription">-->          
            </div><!--<div class="header clearfix">-->  
      </div><!--<div class="content">-->
      <div class="footer"></div>
    </div><!--<div class="wrapper">-->
    </form>
</body>
</html>

-- css---------------------
*{
    box-sizing:border-box;
}
/* Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
 Source: http://nicolasgallagher.com/micro-clearfix-hack/
*/

.clearfix:before,
.clearfix:after{
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
body{
    background-color:rgb(238,238,238);
    font-family:"Tahoma","sans-serif";
    font-size:100%;
}
.wrapper{
   margin:0 auto; 
   padding: 2em 2em 3em 2em;
   width: 70%;
   height:350px;
   background-color:white;
   -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
   -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.horizontalGap{ 
   width: 99%;
   border: 1px solid black;
   background-color:white;
   height:.6em;
}
.left-col, .right-col{
    border: 1px solid black;
    float:left;
}

.left-col{
    width:28%;
    margin-right:1%;
}
.right-col{
    width:70%;
}
.date{
    width:15%;
	border: 1px solid blue;
	
}
.company{
    width:65%;
	border: 1px solid blue;
	float:yes;
}
.city{
    width:30%;
	border: 1px solid blue;
}
.workDescription{
    width:85%;
	border: 1px solid blue;
}
.skills ,.skillsDescription{
    width:100%;
	border: 1px solid blue;
}
.experience{
    width:100%;
	border: 1px solid green;
}

.contact{
	color:rgb(89,89,89);
	text-align:right;
	white-space: nowrap;
	height:4em;
}
.contactBlue{
  font-size:1.1em;
  font-weight:bold;
  white-space: nowrap;
  color:rgb(84,142,212);
}
.nameBlock{
  text-align:center;
  height:4em;
}
.name{
  font-size:1.3em;
  font-weight:bold;
  color:rgb(89,89,89);
  white-space: nowrap;
}
.title{
  font-weight:bold;
  color:rgb(84,142,212);
  white-space: nowrap;
}

Open in new window

0
Robert SchuttSoftware EngineerCommented:
2 issues:
* The widths of date, company and city add up to 110%
* float:yes is not valid

it works after changing city to 20% and floating all divs in the right column:
.right-col div{
    float:left;
}

Open in new window

Note, you may want to put in a min-width somewhere (on .wrapper for example) because when it gets too narrow the texts can wrap to the next line and mess up the floats.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Robert,

Good to hear from you. I have made it work by adding two new div tags as shown on the image:
<div class="exprience">  FYI, there are two tags using this class in the sample image below
<div class="companyCity">
moveIf I can do without having to add these to <div> tags, it will be great.

Currently I have:
.right-col{
    width:70%;
}

I will remove my new div tags and also change my .right-col class per your post to see if I can do it with a fewer <div> tags:

.right-col{
    width:70%;
   float:left;
}

Also, your comment on min-width is an excellent idea and I will include it for sure.

brb,
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
It seems adding these two div tags keeps the layout together well when user zooms in and out. But I will apply min-width.

Thanks,

Mike
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.