Put images and text in different heights html/css?

Question

1.00/5 (1 vote)

See more:

Hello,
I have finished my html/css lessons but I m having hard time making a menu I want with images and text that are not set aligned but in different heights .I m linking an image to make you understand what I want.

http://i64.tinypic.com/1zvv8l4.jpg[^]

I read in stackoverflow that I should not use position properties if I want this menu to be responsive.

Thank you .

Posted 15-Dec-15 3:07am

George Tourtsinakis

Updated 15-Dec-15 3:18am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v2

Add a Solution

Comments

Andy Lanng 15-Dec-15 9:29am

What the mean by "responsive" is that when viewed on a browser with restricted width, the menu should shift out of the format you show into a simpler one.

Bootstrap does this often. I suggest you look to see how that css uses cascading media styles to arrange columns and rows.

George Tourtsinakis 15-Dec-15 9:53am

They told me not to use position properties for responsive design.Anyway the thing is I can't do that without position properties.Maybe I m missing something.You can suggest any code if you think the menu will look like the img I posted.

Sergey Alexandrovich Kryukov 15-Dec-15 10:12am

What they told you makes perfect sense. Even though absolute position can be used for responsive design, too (it would be more correctly to talk about fluid or liquid designs), it would be bases on calculations of window innerHeight and innerWidth (that is, something which is already done with normal flow of elements) and would be error-prone.

In practice, absolute positioning should only be uses when you need to overlap elements. But you want just the opposite: avoid overlapping and preserve the shape of the pattern created by those text and image elements.

I provided explanation of one of the approaches; please see Solution 1.

—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-12-15T04:07:00

Here is a hint for you: if you look properly, you will see a table of 5 columns and 2 rows, with 3 cells left empty.

For implementation, you can use 3 rows of div elements with appropriate CSS styles, in particular, the property display with values "table-row" and "table-cell":
https://developer.mozilla.org/en-US/docs/Web/CSS/display[^].

[EDIT]

Here is a proof of concept for you:

HTML

<html>
   <head>
      <title>Table layout</title>
      <style>
         div { padding-left: 1em; padding-right: 1em;
               padding-top: 0.4em; padding-bottom: 0.4em; }
         div.menu { display: table; }
         div.row { display: table-row; }
         div.cell { display: table-cell;
                    vertical-align:middle; text-align: center;
                    border: solid black thin; }
      </style>
   </head>
<body>

<div class="menu">

   <div class="row">
      <div class="cell">Image 1</div>
      <div class="cell"></div>
      <div class="cell">Text 1</div>
      <div class="cell"></div>
      <div class="cell">Image 2</div>
   </div>
   
   <div class="row">
      <div class="cell"></div>
      <div class="cell">Image 3</div>
      <div class="cell">Text 2<br/>
         more text<br/>more…</div>
      <div class="cell">Image 4</div>
      <div class="cell"></div>
   </div>

</div>

</body>
</html>

For final results, remove the borders; I added them just for demonstration. Pay attention for vertical-align and the fact that the content adjusts itself in both vertical and horizontal direction, depending on the size of the inner content of all cells.

—SA