Dean Dean - 3 years ago 73
CSS Question

Aligning image and div across screen sizes

I am trying to design my first website and I'm having trouble aligning my top bar css to align with my logo, I have a feeling i am doing this incorrectly because depending on the user's screen size it will also look different with a fixed height css value.

This is what i want it to look like on all screen resoloutions:
enter image description here

this is what it looks like on a lower screen res:

enter image description here

below is my markup:



h1 {
color: #111;
font-family: 'Helvetica Neue', sans-serif;
font-size: 45px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
padding: 20px;
}

h2 {
color: #111;
font-family: 'Open Sans', sans-serif;
font-size: 30px;
font-weight: 300;
line-height: 32px;
margin: 0 0 72px;
text-align: center;
}

p {
color: #685206;
font-family: 'Helvetica Neue', sans-serif;
font-size: 14px;
line-height: 24px;
margin: 0 0 24px;
text-align: justify;
text-justify: inter-word;
}

html,
body {
height: 100%;
margin: 0;
font-size: 20px;
}

.topbar {
background-color: #EEB84F;
width: 100%;
height: 40px;
padding: 5px;
position: fixed;
}

.logo {
min-width: 100%;
width: auto;
}

.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
margin-top: -50px;
}

.thumbwrapper {
width: auto;
}

.thumb {
background: white;
float: left;
margin: 20px;
}

.thumb {
width: 121px;
height: 174px;
}

.img {
box-shadow: 10px 10px 5px #888888;
max-width: 100%;
width: 121px;
height: 174px;
border-radius: 6px;
}

.img:hover {
box-shadow: 10px 10px 5px #666688;
cursor: pointer;
}

.left {
width: 10%;
height: 100%;
position: fixed;
outline: 1px solid;
background: #333;
}

.right {
width: 90%;
height: auto;
outline: 0px solid;
position: absolute;
right: 0;
background: #FFF;
}

<div class="left">
<div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div>
</div>

<div class="right">
<div class="topbar"></div>
<h1>Latest Additions</h1>
<div class="wrapper">
<div class="thumbwrapper">
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div>
<div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div>
</div>
</div>
</div>





or you can view it live at this online location

Answer Source

The problem is that your logo image, will shrink when you go on smaller screens. Because the image must fit inside that 10% width you set on the .left div.

Now, i am not going to change your entire structure but i suggest you set a height of 50px to the .logo ( the div around the image ) and a background-color: #EEB84F . This is because the topbar has these styles set.

Then you can center the logo img by using display:flex on logo

see Snippet below or fiddle > jsFiddle

.logo  {
  min-height:50px;
  background:#EEB84F;
  display:flex;
  align-items:center;
}

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  padding: 20px;
}

h2 {
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
  margin: 0 0 72px;
  text-align: center;
}

p {
  color: #685206;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 24px;
  text-align: justify;
  text-justify: inter-word;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
}

.topbar {
  background-color: #EEB84F;
  width: 100%;
  height: 40px;
  padding: 5px;
  position: fixed;
}

.logo {
  min-width: 100%;
  width: auto;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: -50px;
}

.thumbwrapper {
  width: auto;
}

.thumb {
  background: white;
  float: left;
  margin: 20px;
}

.thumb {
  width: 121px;
  height: 174px;
}

.img {
  box-shadow: 10px 10px 5px #888888;
  max-width: 100%;
  width: 121px;
  height: 174px;
  border-radius: 6px;
}

.img:hover {
  box-shadow: 10px 10px 5px #666688;
  cursor: pointer;
}

.left {
  width: 10%;
  height: 100%;
  position: fixed;
  outline: 1px solid;
  background: #333;
}

.right {
  width: 90%;
  height: auto;
  outline: 0px solid;
  position: absolute;
  right: 0;
  background: #FFF;
}
<div class="left">
  <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div>
</div>

<div class="right">
  <div class="topbar"></div>
  <h1>Latest Additions</h1>
  <div class="wrapper">
    <div class="thumbwrapper">
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div>
    </div>
  </div>
</div>

As a suggestion, you should put .topbar outside the left and right div . and put the logo inside it.

Your structure should be something like

<div class="topbar">
    <div class="logo">
            <img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" />
    </div>
</div>
<div class="content">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

also not sure why you need that left div, you can easily make that gray section without a new div ( border or pseudo-elements etc. )

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download