Mike Eghtebas
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.
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.
<!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"> </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;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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">
If 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,
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">
If 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,
ASKER
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
Thanks,
Mike
ASKER
Open in new window