CODEWITHSUNDEEP
htmlcss
Magnus
Magnus

Reputation: 18810

Two divs on one row, only one should scale

I have two elements that I want to place next to each other - one is a logo, the other is an "overflow" menu that will display a dropdown when clicked.

I want to have them scale so that the logo is at most 400px wide, and the menu button is always 1.5em wide and tall. The logo should stay vertically center aligned with the menu button, and the button should always be at the far right of the parent.

Tried using flexbox but I'm no CSS genius, I can't make it work. (btw, will we ever see CSS being more like the Android XML layout system? It'd be a breeze to use a LinearLayout with some gravity and weight to do something like this. With CSS it seems you always have to resort to hacks and hard-to-read solutions at some point)

So this is what it would look like when the logo is at it's maximum 400px width:

Layout on tablet

And here is what it would look like on a phone, where the logo needs to shrink to make room for the menu button:

Layout on phone

Upvotes: 0

Views: 96

Answers (3)

DigitCart
DigitCart

Reputation: 3000

I used line-height and vertical-align with calc.

html:

<div class="row">
  <div class="menu-button"></div>
  <div class="logo">
    <img src="http://placehold.it/400x70">
  </div>
</div>

css:

.menu-button {
    background-color: #ffa200;
    float: right;
    height: 70px;
    width: 70px;
}
img {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}
.logo {
  float: left;
  height: 70px;
  line-height: 70px;
  max-width: calc(100% - 80px);
}

Demo: https://jsfiddle.net/sabeti05/1yg32uqo/

Upvotes: 0

Christian Hain
Christian Hain

Reputation: 639

Here's a solution using flexbox.

.header {
  display: flex;
  flex-direction: flex-end;
  justify-content: space-between;
}

.logo {
  background-image: url(http://placehold.it/400x50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 50px;
  max-width: 400px;
  width: 100%;
}

.menu-toggle {
  background-color: orange;
  flex-shrink: 0;
  height: 50px;
  margin-left: 10px;
  width: 50px;
}
<div class="header">
  <div class="logo"></div>
  <div class="menu-toggle"></div>
</div>

Upvotes: 2

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

An easy way to do it is here.

.header{
			margin:0px !important;
			padding: 0px !important;
			display: table;
			width: 100%;
			height: 1.5em;
			overflow-y: hidden;
			box-shadow: 0 1mm #aaa 5px;
			vertical-align: middle !important;
			position: relative;
		}

		#img-holder{
			display: table-cell;
			vertical-align: middle;
			height : 100%;
			background-color : blue;
			max-width : 400px;
			min-width : 250px;
			padding: 0px !important;
		}
		#img {
			display: table-cell;
			max-width: 350px;
			min-width: 150px;
			height: 0.75em!important;
			vertical-align: middle;
			background-color: pink;
		}

		#menu-btn{
			display: block;
			margin: auto;
			float: right;
			height: 1.5em;
			width: 1.5em;
			background-color: orange;
			border:none;
			margin: 0px !important;
			padding: none;
		}
	<div class="header">
		<div id="img-holder"><span  id="img"> Your Img</span></div>
		<a id="menu-btn"></a>
	</div>

Upvotes: 0

Related Questions