James Dickens James Dickens - 4 months ago 8
CSS Question

Organizing the header of an HTML file

Suppose I have a header of a fixed size in html where I want to organize four separate objects (although the type of objects is not super important)
- an image
- some text
- a button
- another button

And I want them all to be in a line, with asymmetric widths, What would be the easiest way to achieve this "organizationally". Assume the heights of each element are appropriately sized. I am looking for a simple solution as a starting point. Here is sample code of what I have so far



<html>
<body>
<div id = "container">
<div id = "header">
<span> <img src = "test.jpg"> <h1> Testing File </h1>
<button type = "button"> Button1 </button>
<button type = "button"> Button2 </button></span>
</div>
</div>
</body>
</html>

Answer

Since the <span> behaves as a inline container, the element messing up your layout is the <h1> which behaves as a block element. Simply change the display of the <h1> to an inline style such as inline, inline-block, or inline-flex.

<html>
 <head>
  <style type="text/css">
   #header h1 {
    display: inline;
   }
  </style>
 </head>
 <body>
  <div id="container">
   <div id="header" >
    <span>
     <img src="test.jpg"> <h1> Testing File </h1>
     <button type="button"> Button1 </button>
     <button type="button"> Button2 </button>
    </span>
   </div>
  </div>
 </body>
</html>
Comments