James Dickens James Dickens - 1 year ago 37
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

<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>

Answer Source

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.

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