Link to home
Start Free TrialLog in
Avatar of Mike Eghtebas
Mike EghtebasFlag for United States of America

asked on

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.
User generated image
<!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

Avatar of Mike Eghtebas
Mike Eghtebas
Flag of United States of America image

ASKER

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:
User generated image
<!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

ASKER CERTIFIED SOLUTION
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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">
User generated imageIf 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,
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