CODEWITHSUNDEEP
htmlcsslayout
user838531
user838531

Reputation: 488

responsive 3-columns layout with third column having fixed size

I am trying to create a simple element consisting of 3 columns, the 3. column being an icon-image. I want the element to be responsive, but the icon-image should always have the same size (e.g. 40x40 px). So, the 1. and 2. column should have % values, the 3. column should have width 40px. I don't want the icon-image to resize on smaller screens. The icon should always have width 40px.

.container {
  width: 80%;
}

.text1 {
  float: left;
  width: 30%;
}

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

.image {
  float: right;
  width: 120px;
}
<div class="container">

  <p class="text1">Some Titel</p>

  <h3 class="text2">Some Text and some more text...</h3>

  <img src="image1.jpeg" alt="" class="image" />

</div>

https://jsfiddle.net/mkrizanek/usfmk6r7

Kind regards, Milan

Upvotes: 0

Views: 228

Answers (2)

user8119116
user8119116

Reputation:

I have tweaked a little bit with HTML and CSS. But I hope you will get the logic. I have changed the display-type of container to flex. You can change the with of elements inside container as per your requirements.

.container {
  background-color: #DDDDDD;
  width: 80%;
  display: flex;
}

.text {
  background-color: #BBBBBB;
  width: 50%;
}

.heading {
  background-color: #999999;
  width: 50%;
}

img {
  max-width: 120px;
  max-height: 120px;
}
<div class="container">
  <p class="text">Some Text</p>
  <h3 class="heading">Heading</h3>
  <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="image" />
</div>

Upvotes: 1

Brian
Brian

Reputation: 675

Your best option is probably to use flex.

Set "display: flex; justify-content: space-between" on the container div, and "flex: 1;" on each section that you want responsive.

If you want the text in the second div to push all the way to the image, you can also add "text-align: right;" to it.

.container {
  display: flex;
  justify-content: space-between;
}

.text1 {
  flex: 1;
}

.text2 {
  flex: 1;
}

.image {
  width: 40px;
  height: 40px;
  background: #088;
}
<div class="container">

  <p class="text1">Some Title</p>

  <h3 class="text2">Some Text and some more text...</h3>

  <img alt="" class="image" />

</div>

Here is a good resource for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Upvotes: 1

Related Questions