CODEWITHSUNDEEP
htmlcss
Josh Smith
Josh Smith

Reputation: 23

Align elements left without float or inline-block

I need to align elements to the left, currently they are going beneath each other. If I use float or inline-block it screws up the vertically centred text (which needs to be dynamic as there may only be one row). Here's what I've got:

#header-bar-content-wrapper {
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
  color: #000;
  text-align: left;
}

#nav-brand-container {
  height: 90px;
  text-align: left;
}

#header-logo {
  height: 70px;
  margin: 10px 24px 10px 0;
}

.nav-home-button {
  height: 90px;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

.nav-home-button a,
.nav-home-button a:active,
.nav-home-button a:visited {
  color: #000;
  text-decoration: none;
}

.nav-home-button .button-text {
  margin: 0;
  float: none;
}

.nav-home-button h1 {
  font-weight: 300;
}
<div id='header-bar-content-wrapper'>
  <div id='nav-brand-container'>
    <a href='http://localhost:8888/nt' title='Test Site Name'>
      <img id="header-logo" src="http://localhost:8888/nt/wp-content/uploads/2016/01/height100px.png"> </a>
    <div class='nav-home-button'>
      <a href='http://localhost:8888/nt' title='Test Site Name'>
        <h1 class='button-text'>Test Site Name</h1>
        <p class='button-text'>This is a test website for a test theme.</p>
      </a>
    </div>
  </div>
</div>

Cheers to anyone that can offer me some help!

EDIT: sorry it's not clear - the img is on the left and text is on top of each other (like 2 lines of a paragraph except the h1 is larger) next to the img (on the right of the img). the text is centred vertically but they aren't both always there so i need them to re-centre when that occurs.

Upvotes: 0

Views: 523

Answers (3)

Josh Smith
Josh Smith

Reputation: 23

Thank you Mr Lister for the answer!

#header-bar-content-wrapper {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
    color: #fff;
    text-align: left;
}

#nav-brand-container {
    height: 90px;
    text-align: left;
    display: table;
}

#nav-brand-container > * {
    display: table-cell;
    vertical-align: middle;
}

#header-logo {
    height: 70px;
    margin: 10px 24px 10px 0;
}

.nav-home-button a,
.nav-home-button a:active,
.nav-home-button a:visited {
    color: #fff;
    text-decoration: none;
}

.nav-home-button .button-text{
    margin: 0;
}

.nav-home-button h1{
    font-weight: 300;
}
<div id='header-bar-content-wrapper'>
  <div id='nav-brand-container'>
    <a href='http://localhost:8888/nt' title='Test Site Name'>
      <img id="header-logo" src="http://localhost:8888/nt/wp-content/uploads/2016/01/height100px.png"> </a>
    <div class='nav-home-button'>
      <a href='http://localhost:8888/nt' title='Test Site Name'>
        <h1 class='button-text'>Test Site Name</h1>
        <p class='button-text'>This is a test website for a test theme.</p>
      </a>
    </div>
  </div>
</div>

Thanks everyone else that offered their help too.

Upvotes: 0

tarun joshi
tarun joshi

Reputation: 107

Use this css 

.nav-home-button .button-text{
         margin: 0;
         float: none;
         display: initial;
        }

Upvotes: 0

gitfudge
gitfudge

Reputation: 530

This should suffice your needs 

#header-bar-content-wrapper {
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
  color: #000;
  text-align: left;
}

#nav-brand-container {
  height: 90px;
  text-align: left;
}

#header-logo {
  height: 70px;
  margin: 10px 24px 10px 0;
}

.nav-home-button {
  border: 1px solid red;
  height: 90px;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

.nav-home-button a,
.nav-home-button a:active,
.nav-home-button a:visited {
  color: #000;
  text-decoration: none;
}

.nav-home-button .button-text {
  margin: 0;
  float: none;
  display: inline-flex;
  vertical-align: middle;
  border: 1px solid blue;
}

.nav-home-button h1 {
  font-weight: 300;
}
<div id='header-bar-content-wrapper'>
  <div id='nav-brand-container'>
    <a href='http://localhost:8888/nt' title='Test Site Name'>
      <img id="header-logo" src="http://localhost:8888/nt/wp-content/uploads/2016/01/height100px.png"> </a>
    <div class='nav-home-button'>
      <a href='http://localhost:8888/nt' title='Test Site Name'>
        <h1 class='button-text'>Test Site Name</h1>
        <p class='button-text'>This is a test website for a test theme.</p>
      </a>
    </div>
  </div>
</div>

Hope it helps!

Upvotes: 1

Related Questions