CODEWITHSUNDEEP
htmlcssimagetextalignment
Jakob
Jakob

Reputation: 41

Align image next to text html & css

I currently have this from my CSS & HTML: enter image description here

However, I would like the image to align with the header text, like this: enter image description here

How would i do this? I have floated the text to the left and the image to the right.

Here is my CSS & HTML

html, body {
    margin: 0;
    padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.wrapper {
  width: 1100px;
  max-width: 90%;
  margin: 0 auto;
}

#top_header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  background-color: #26ABF5;
  height: 70px;
  width: 100%;
  vertical-align: middle;
}

#logo_top {
  display: inline-block;
  float: left;
  width: 53px;
  padding-top: 8px;
}

#main_nav {
  display: inline-block;
  font-size: 13px;
  line-height: 70px;
  padding-left: 150px;
}

#main_nav a {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  margin-left: 6em;
}

.button {
  float: right;
  justify-content: center;
  display: flex;
  width: 101px;
  margin-top: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-radius: 2px;
  background-color: #fff;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #26abf5;
  font-size: 13px;
  font-weight: 600;
}

.banner {
  height: 400px;
  background-image: url('../images/Banner_bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.banner_header {
  margin-top: 60px;
  display: flex;
  padding-top: 89px;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 33px;
}

.banner_paragraph {
  display: flex;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: -15px;
}

.priser_button {
  display: flex;
  width: 207px;
  justify-content: center;
  border: 3px solid #fff;
  -webkit-transition: background-color 400ms ease;
  transition: background-color 400ms ease;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 9px 0 9px 0;
  text-decoration: none;
}

.priser_button:hover {
  background-color: #26abf5;
}

.container {
  display: flex;
  padding-top: 84px;
  justify-content: center;
}

.logo {
  width: 53px;
  padding-top: 5px;
}

.underbanner_header {
  display: flex;
  margin-top: 60px;
  font-family: 'Open Sans', sans-serif;
}

.content_p {
  font-family: 'Open Sans', sans-serif;
  max-width: 400px;
  float: left;
}

.image_content {
  float: right;
  width: 40%;
  margin-bottom: 30px;
}
  <body>
    <header id="top_header">
      <div class="wrapper">
        <a href="index.html"><img id="logo_top" draggable="false" src="images/logo1.png"></a>
          <nav id="main_nav">
            <a href="index.html">FORSIDE</a>
            <a href="#">HVAD TILBYDER VI?</a>
            <a href="#">PRISER</a>
            <a href="#">OM OS</a>
          </nav>
            <a class="button" href="#">LOG IND</a>
        </div>
      </header>

        <div class="banner">
          <h2 class="banner_header">DANMARKS FEDESTE FITNESS CENTER</h2>
          <p class="banner_paragraph">BLIV EN DEL AF TEAMET I DAG</p>
          <div class="container"><a class="priser_button" href="#">SE VORES PRISER</a>
        </div>
      </div>

      <div class="underbanner">
      <div class="wrapper">
        <h3 class="underbanner_header">NYT CENTER I SØNDERBORG</h3>
        <p class="content_p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
        <img src="images/content1.jpg" class="image_content"/>
      </div>
    </div>
  </body>

Upvotes: 0

Views: 289

Answers (2)

tomasantunes
tomasantunes

Reputation: 945

I suggest a few changes:

.col_50{
  float:left;
  width: 50%;
}

.underbanner_header {
  margin-top: 0;
  font-family: 'Open Sans', sans-serif;
}

.image_content {
  float: right;
  width: 100%;
  margin-bottom: 30px;
}

<div class="underbanner">
  <div class="wrapper">
    <div class="col_50">
      <h3 class="underbanner_header">NYT CENTER I SØNDERBORG</h3>

      <p class="content_p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
    </div>
    <div class="col_50">
      <img src="images/content1.jpg" class="image_content"/>
    </div>
  </div>
</div>

Upvotes: 1

Asons
Asons

Reputation: 87191

Wrap the text, move the float: left from .content_p to the wrapper (underbanner_content) and give the image the same margin top (margin-top: 60px;)

html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Open Sans', sans-serif;
}
.wrapper {
  width: 1100px;
  max-width: 90%;
  margin: 0 auto;
}
#top_header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  background-color: #26ABF5;
  height: 70px;
  width: 100%;
  vertical-align: middle;
}
#logo_top {
  display: inline-block;
  float: left;
  width: 53px;
  padding-top: 8px;
}
#main_nav {
  display: inline-block;
  font-size: 13px;
  line-height: 70px;
  padding-left: 150px;
}
#main_nav a {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  margin-left: 6em;
}
.button {
  float: right;
  justify-content: center;
  display: flex;
  width: 101px;
  margin-top: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-radius: 2px;
  background-color: #fff;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #26abf5;
  font-size: 13px;
  font-weight: 600;
}
.banner {
  height: 400px;
  background-image: url('../images/Banner_bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
.banner_header {
  margin-top: 60px;
  display: flex;
  padding-top: 89px;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 33px;
}
.banner_paragraph {
  display: flex;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: -15px;
}
.priser_button {
  display: flex;
  width: 207px;
  justify-content: center;
  border: 3px solid #fff;
  -webkit-transition: background-color 400ms ease;
  transition: background-color 400ms ease;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 9px 0 9px 0;
  text-decoration: none;
}
.priser_button:hover {
  background-color: #26abf5;
}
.container {
  display: flex;
  padding-top: 84px;
  justify-content: center;
}
.logo {
  width: 53px;
  padding-top: 5px;
}
.underbanner_content {
  float: left;
}
.underbanner_header {
  margin-top: 60px;
  font-family: 'Open Sans', sans-serif;
}
.content_p {
  font-family: 'Open Sans', sans-serif;
  max-width: 400px;
}
.image_content {
  float: right;
  width: 40%;
  margin-bottom: 30px;
  margin-top: 60px;
}
<body>
  <div class="underbanner">
    <div class="wrapper">
      <div class="underbanner_content">
        <h3 class="underbanner_header">NYT CENTER I SØNDERBORG</h3>
        <p class="content_p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus
          id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
      </div>
      <img src="http://placehold.it/150" class="image_content" />
    </div>
  </div>
</body>

Upvotes: 1

Related Questions