I need to get the image to change onmouseenter/hover to a different image. I looked around and found a lot of rollover solutions but that won't work for me because I need to scale the image on hover as well.
Also the last image in #recent appears to be broken, hovering over the #galleries section has a link to it and i can't figure out if that is because of col-md-offset-1 or something else.
<body>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div class="col-md-2 col-md-offset-1">
<a href="http://shniper1337.github.io/firstbootstrap/">
<img src="images/firstbootstrap.png" class="img-rounded"></a>
</div>
<div class="col-md-2">
<a href="http://shniper1337.github.io/pong/">
<img src="images/pong.png" class="img-rounded"></a>
</div>
<div class="col-md-2">
<a href="http://shniper1337.deviantart.com/art/Photomontage-490696483">
<img src="images/design.png" class="img-rounded"></a>
</div>
<div class="col-md-2">
<a href="http://shniper1337.deviantart.com/art/Website-design-WIP-571887134">
<img src="images/survivingearth.png" class="img-rounded">
</div>
<div class="col-md-2">
<a href="http://shniper1337.deviantart.com/art/Old-Law-Firm-545208961">
<img src="images/lawfirm.png" class="img-rounded">
</div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
<div id="footer">
</div>
</div>
</body>
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
width: 100%;
height: 50px;
background-color: #000;
margin-top: -10px;
}
#jumbotron {
width: 100%;
height: 750px;
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
width: 100%;
height: 250px;
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#recent img {
height: 155px;
box-shadow: 5px 5px 5px #111111;
margin-top: 10px;
position: relative;
}
#galleries {
background-color: #3c5f7c;
height: 200px;
}
.col-md-4 {
max-width: 27%;
margin-left: 3%;
}
.row {
margin-left: 6%;
}
#recent div:nth-of-type(1) img:hover {
background-image: url("images/firstbootstrapfull.png");
z-index: 1;
position: relative;
}
#recent div:nth-of-type(2) img:hover {
}
#recent div:nth-of-type(3) img:hover {
}
#recent div:nth-of-type(4) img:hover {
}
#recent div:nth-of-type(5) img:hover {
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}
#footer {
width: 100%;
height: 20px;
background-color: #000;
}
Here is a jsfiddle that appears to be broken
Solving this with css is preferred but not necessary.
You could add in something like this to your CSS
#randomDiv {
background-image: url('image.png');
height: 70px;
width: 120px;
}
#randomDiv:hover {
background-image: url('differenthoverimage.png');
width: 50px; // or whatever width you want
height: 50px; // or whatever height you want
}
And that should change the image and height/width.
(make sure to add a different id for each image you want to do this and set it in the HTML)
Related
I have two divs floating next to each other: one has large headline text, and the other has a photo with a caption. The goal is to have the headline text vertically centered regardless of what the div height ends up being.
I've tried several methods to achieve this, but it's being pretty stubborn. I've included my code in the following codepen as reference:
http://codepen.io/ckatz/pen/KaBNxm
HTML:
<div class="container_16">
<div class="grid_8 headline">
<span class="gold"><strong>We have a special way of helping</strong>/span><br> each individual find their success.</p>
</div>
<div class="grid_8">
<div>
<div class="wp-caption alignnone" style="width: 100%">
<img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
<p class="wp-caption-text">photo caption</p>
</div>
</div>
</div>
CSS:
.container_16 {
width: 90%;
}
.container_16 .grid_8 {
width: 47%;
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
p.wp-caption-text {
text-align: center;
font-weight: bold;
font-style: normal;
margin: 1em;
padding: 0 0 1em 0;
}
I use this method below. Let your container get it's height from the image, and then vertically center the text.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
You can use flexbox and align-self on the child container. Try adding these styles:
.container_16 {
display: flex;
width: 90%;
}
.headline {
align-self: center;
}
You can apply the following CSS to get the text vertically aligned.
.gold {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
This will keep it aligned regardless of the div height.
Instead float, use display:(inline-block,table,table-cell, flex) + vertical-align or margin :
inline-block + vertical-align
#import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-weight: normal;
}
p {
font-size: 1em;
line-height: 1.4em;
}
.container_16 {
width: 90%;
}
.container_16 .grid_8 {
width: 47%;
display: inline-block;
vertical-align:middle;
position: relative;
}
.headline {
font-size: 3em;
}
.gold {
color: #ffb500;
}
p.wp-caption-text {
text-align: center;
font-weight: bold;
font-style: normal;
margin: 1em;
padding: 0 0 1em 0;
}
<div class="container_16">
<div class="grid_8 headline">
<p>
<span class="gold">
<strong>We have a special way of helping</strong>
</span>
<br> each individual find their success.
</p>
</div>
<div class="grid_8">
<div>
<div class="wp-caption alignnone" style="width: 100%px">
<img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
<p class="wp-caption-text">This is a caption for the photo here.</p>
</div>
</div>
</div>
display:table-cell and vertical-align
#import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-weight: normal;
}
p {
font-size: 1em;
line-height: 1.4em;
}
.container_16 {
width: 90%;
display:table;
table-layout:fixed;
}
.container_16 .grid_8 {
width: 47%;
display: table-cell;
vertical-align: middle;
position: relative;
padding-left: 10px;
padding-right: 10px;
}
.headline {
font-size: 3em;
}
.gold {
color: #ffb500;
}
p.wp-caption-text {
text-align: center;
font-weight: bold;
font-style: normal;
margin: 1em;
padding: 0 0 1em 0;
}
<div class="container_16">
<div class="grid_8 headline">
<p>
<span class="gold"><strong>We have a special way of helping</strong></span>
<br>each individual find their success.
</p>
</div>
<div class="grid_8">
<div>
<div class="wp-caption alignnone" style="width: 100%px">
<img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
<p class="wp-caption-text">This is a caption for the photo here.</p>
</div>
</div>
</div>
display:flex and margin:auto 0;
#import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-weight: normal;
}
p {
font-size: 1em;
line-height: 1.4em;
}
.container_16 {
width: 90%;
display:flex;
}
.container_16 .grid_8 {
width: 47%;
margin:auto 0;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
.headline {
font-size: 3em;
}
.gold {
color: #ffb500;
}
p.wp-caption-text {
text-align: center;
font-weight: bold;
font-style: normal;
margin: 1em;
padding: 0 0 1em 0;
}
<div class="container_16">
<div class="grid_8 headline">
<p>
<span class="gold">
<strong>We have a special way of helping</strong>
</span>
<br> each individual find their success.
</p>
</div>
<div class="grid_8">
<div>
<div class="wp-caption alignnone" style="width: 100%px">
<img src="http://placehold.it/500x500" alt="" width="100%" height="auto">
<p class="wp-caption-text">This is a caption for the photo here.</p>
</div>
</div>
</div>
Simple solution using display: table-cell; adapted from this CSS Tricks article: Vertically Center Multi-Lined Text
<div class="parent">
<p>Multi <br>line</p>
</div>
.parent {
display: table;
}
.parent p {
display: table-cell;
vertical-align: middle;
}
Demo on JS Bin
As you can see i goes straight to the middle instead of the starting point of the div. I have set a margin and width for my div and when I do input an <H1> tag, the text just floats to the middle of the div instead of the far left where the div begins. I have set the width so it can start at that starting point not 45px to the left.
This is the HTML
<div id="topbar">
<div id="logo"> <img src="Pictures/bbc.png"> </div>
<div id="signin" class="border-part"> </div>
<div> <img id="logo-image" src="Pictures/signin.png">
<p class="signin-text">Sign in</p>
</div>
<div id="dash"> <img id="dash-image" src="Pictures/bash2.png"> </div>
<div> <img id="bell"src="Pictures/bell3.png"> </div>
<div class="border-part stuff-section"> News </div>
<div class="border-part stuff-section"> Sport </div>
<div class="border-part stuff-section"> Weather </div>
<div class="border-part stuff-section"> iPlayer </div>
<div class="border-part stuff-section"> TV </div>
<div class="border-part stuff-section"> Radio </div>
<div class="border-part stuff-section"> More </div>
<div class="seacher-border">
<input id="search-box" type="text" placeholder="Search">
<img id="search-pic" src="Pictures/search.png"> </div>
</div>
<div id="second-bar">
<div id="newsbar">
<h1>NEWS</h1>
</div>
</div>
This is my CSS
#topbar {
width: 1080px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helmet, Freesans, Helvetica, Arial, sans-serif;
;
}
#logo {
margin-top: 8px;
float: left;
margin-right: 8px;
}
.border-part {
float: left;
height: 100%;
border-left: 1px #CCCCCC solid;
}
#logo-image {
width: 20px;
margin: 12px;
float: left;
}
.signin-text {
margin: 14px;
font-size: 90%;
font-weight: bold;
float: left;
}
#dash-image {
padding-left: 50px;
float: left;
height: 40px;
}
#bell {
margin: 8px;
height: 28px;
float: left;
}
.stuff-section {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
.seacher-border {
float: left;
height: 100%;
border-left: 1px #CCCCCC solid;
margin-left: 20px;
}
#search-box {
margin: 10px;
font-weight: bold;
background-color: #E4E4E4;
font-size: 14px;
border: none;
height: 24px;
float: left;
}
#search-pic {
position: relative;
right: 10px;
top: 10px;
height: 25px;
}
#second-bar {
background-color: #BB1919;
width: 100%;
height: 80px;
}
#newsbar {
width: 1080px;
margin: 0 auto;
background-color: blue;
}
h1 {
padding: 0;
margin: 0;
float;
}
A flexbox option for alignment
#second-bar {
display: flex;
background-color: #BB1919;
width: 100%;
height: 80px;
}
#newsbar {
display: flex;
justify-content: flex-start; /* horizontal alignment - change to flex-end or center to see difference */
align-items: center; /* vertical alignment */
width: 100%;
margin:0 auto;
}
h1 {
display: flex;
padding:0;
margin:0;
}
<div id="second-bar">
<div id="newsbar">
<h1>NEWS</h1>
</div>
</div>
fiddle
https://jsfiddle.net/Hastig/zn4qkok2/
A possible non-flexbox solution
#second-bar {
background-color: #BB1919;
width: 100%;
height: 80px;
}
#newsbar {
text-align: left; /* change to center or right to see difference */
vertical-align: middle;
width: 100%;
line-height: 80px; /* match to height of parent for centered vertical alignment */
margin:0 auto;
}
h1 {
display: inline-block;
padding:0;
margin:0;
}
<div id="second-bar">
<div id="newsbar">
<h1>NEWS</h1>
</div>
</div>
fiddle
https://jsfiddle.net/Hastig/zn4qkok2/1/
Just add clear: both to h1:
#topbar {
width: 1080px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helmet, Freesans, Helvetica, Arial, sans-serif;
;
}
#logo {
margin-top: 8px;
float: left;
margin-right: 8px;
}
.border-part {
float: left;
height: 100%;
border-left: 1px #CCCCCC solid;
}
#logo-image {
width: 20px;
margin: 12px;
float: left;
}
.signin-text {
margin: 14px;
font-size: 90%;
font-weight: bold;
float: left;
}
#dash-image {
padding-left: 50px;
float: left;
height: 40px;
}
#bell {
margin: 8px;
height: 28px;
float: left;
}
.stuff-section {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
.seacher-border {
float: left;
height: 100%;
border-left: 1px #CCCCCC solid;
margin-left: 20px;
}
#search-box {
margin: 10px;
font-weight: bold;
background-color: #E4E4E4;
font-size: 14px;
border: none;
height: 24px;
float: left;
}
#search-pic {
position: relative;
right: 10px;
top: 10px;
height: 25px;
}
#second-bar {
background-color: #BB1919;
width: 100%;
height: 80px;
}
#newsbar {
width: 1080px;
margin: 0 auto;
background-color: blue;
}
h1 {
padding: 0;
margin: 0;
clear: both;
}
<div id="topbar">
<div id="logo"> <img src="Pictures/bbc.png"> </div>
<div id="signin" class="border-part"> </div>
<div> <img id="logo-image" src="Pictures/signin.png">
<p class="signin-text">Sign in</p>
</div>
<div id="dash"> <img id="dash-image" src="Pictures/bash2.png"> </div>
<div> <img id="bell" src="Pictures/bell3.png"> </div>
<div class="border-part stuff-section"> News </div>
<div class="border-part stuff-section"> Sport </div>
<div class="border-part stuff-section"> Weather </div>
<div class="border-part stuff-section"> iPlayer </div>
<div class="border-part stuff-section"> TV </div>
<div class="border-part stuff-section"> Radio </div>
<div class="border-part stuff-section"> More </div>
<div class="seacher-border">
<input id="search-box" type="text" placeholder="Search">
<img id="search-pic" src="Pictures/search.png"> </div>
</div>
<div id="second-bar">
<div id="newsbar">
<h1>NEWS</h1>
</div>
</div>
I am trying to have a three column section that has three different divs, each containing an h2 and a p element. I want to make the left when align right, the middle one align center and the right one align left. I achieved this using nth-of-type however I can't figure out how to get them in the right position so that everything lines up with each other.
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
width: 105%;
height: 50px;
background-color: #000;
margin-left: -2.5%;
margin-top: -10px;
}
#jumbotron {
width: 105%;
margin-left: -2.5%;
height: 900px;
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
width: 105%;
margin-left: -2.5%;
height: 250px;
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#galleries {
width: 105%;
margin-left: -2.5%;
height: 250px;
background-color: #3c5f7c;
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
max-width: 360px;
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div id="thumbnail"></div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
</div>
Also I'm not sure how to get bootstrap to work in jsfiddle sorry :(
https://jsfiddle.net/5bep97xw/
The nth-child idea is the good one. but looks like you need to update the mediaqueries too and what is this 105% width ?
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
/* width: 105%; why ? */
height: 50px;
background-color: #000;
margin-left: -2.5%;
margin-top: -10px;
}
#jumbotron {
/* width: 105%;
margin-left: -2.5%;
height: 900px; why ? */
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
/* width: 105%;
margin-left: -2.5%;
height: 250px; why ? */
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#galleries {
/* width: 105%;
margin-left: -2.5%;
min-height: 250px; do not fix an height and not too sure about margins and width */
background-color: #3c5f7c;
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
/* max-width: 360px; better fix a max-width on parents container ? */
padding:1em;/* might be usefull */
margin:0;/* might be usefull */
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}
#media (max-width:990px){
div div#galleries div[class] p,
div div#galleries div[class] h2 {
text-align:center; /* or left or right */
}
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div id="thumbnail"></div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
</div>
I'm trying to align several DIVS, Images and text and I can't figure this out..
Here's what I'm trying to achieve:
Heres' my HTML
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<img src="iphone.png" width="375">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
Here is my CSS:
.section5{ height: 525px; background-color: #5e6172; text-align: center; position: relative;}
.outer{ width: 80%; background-color: #45da45; height: 100%; margin: 0 auto; position: relative;}
.title1{color: #ffffff; font-size: 2.6em; font-family: h35; }
.subtitle1{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.subtitle2{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.container1{display: block; background-color: #ccc; }
.container2{display: block; background-color: #fffc1e; }
Here is the JSFIDDLE:
http://jsfiddle.net/mib92/hogwohf8/
My current problems:
1) My text at the bottom needs to be on the right side of the image.. center like in my example image.
2) the bottom of my bottom picture must be align to the bottom of container2 AND the bottom of section5
3) While doing this, the container 1 must remain in the vertical middle of the remaining space of the section5.
Thank you
I hops it's help you.
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.right-sied {
display: inline-block;
vertical-align: top;
width: 41%;
}
.left-sied {
display: inline-block;
width: 49%;
}
.left-sied img {
max-width: 100%;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<div class="left-sied">
<img src="iphone.png" width="375">
</div>
<div class="right-sied">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
</div>
Live Demo
check this:
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.container1 .wrapper {
display: inline-block;
float: right;
}
.container2 img {
margin: 0 auto;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="85">
<div class="wrapper">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
</div>
<div class="container2">
<div class="subtitle2">Text</div>
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="375">
</div>
</div>
</div>
http://i.imgur.com/mFtXm.jpg here is a screenshot.
The areas marked in red are where the problems are. When I view the page in firefox it looks fine, in chrome there are tiny gaps, I don't deal with ie.
What is the correct way to size these divs such that each div will "connect" with other divs without leaving any gaps whenever the browser changes? something with jquery or js?
html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div id="header">
<h1>New York Tech Map</h1>
</div>
<div id="navlinks">
<div class="topnav">
About Us
</div>
<div class="topnav">
Contact Us
</div>
<div class="topnav">
Sign Up
</div>
<div class="topnav">
Help
</div>
</div>
<div id="sidebar">
</div>
<div id="map">
</div>
<div id="footer">
© 2012 NYC Tech Map
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #F0F0F0;
}
a { text-decoration: none; color: grey; }
a:hover{ color: red; }
#header {
width: 100%;
height: 75px;
background: red;
margin-top: -21px;
}
#navlinks { float: right; width: 80%;}
.topnav {
width: 25%;
height: 25px;
float: left;
padding-top: 5px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-size: 15px;
font-weight: bold;
}
#sidebar {
width: 20%;
height: 500px;
float: left;
background: blue;
}
#map {
height: 80.8%;
width: 80%;
float: right;
}
.
.popa:hover {
background: #D6D6D6;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-weight: bold;
padding-top: 5px;
color: grey;
}
it is better just resize dynamically, use js to get the window size then have that element adjust accordingly.