HTML: The art of aligning elements within a header

I've been working on creating my personal HTML record, but I'm facing one last challenge that I can't seem to overcome.
I want to design my header like this: https://i.stack.imgur.com/FU8EJ.png

With the following elements: TEXT SUMMARY will represent the job I seek
PHOTO will showcase my photo
NAME will display my name
PERSONAL INFORMATION will include my address and phone number

However, I'm struggling to find a suitable solution as when I try CTRL+ in my browser, the elements appear scattered...

    /* HEADER BLOCK */
    header{
        margin: 2%;
        font-size: 15pt;
        font-family: Comic Sans MS, Comic Sans, cursive;
        width : 96%;
        display: inline-block;
    }

    img#profilePhoto{
        height: 236px;
        width: 236px;
        float: left;
    }

    div#description{
        float: right;
        text-align: right;
    }

    div#search{
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        font-size: 25pt;
        width: 5000px;
    }

    p#name{
        padding: 8px;
        vertical-align: bottom;
        text-align: left;
        font-size: 20pt;
        background-color: #7E97AD;
        color: white;
        width: 100%;
        height: 20pt;
    }
 <br>
 <header>
      <img id="profilePhoto" src="images/photo.jpg" alt="Profile Photo">
      <div id="description">
        FIELD1<br>
        FIELD2<br>
        FIELD3<br>
        FIELD4<br>
        FIELD5<br>
        FIELD6<br>
        FIELD7<br>
      </div>

      <br><br>
      <div id="search">
        <a href="general/recherche.html">CURRENTLY SEEKING A POST GRADUATE INTERNSHIP
        </a>
      </div>

      &nbsp;
      <p id="name">
        &nbsp;&nbsp;NAME
      </p>
    </header>

Could someone guide me on how to create this layout effectively?

htmlcssweb

Answer №1

modify your CSS style 

   header
        {
            display: flex;
            min-width: 100%;
        }
        header img
        {
            display: block;
            float: left;
            width: 25%;
            height: 150px;
        }
        header .right-banner
        {
            display: block;
            float: left;
            width: 75%;
            height: 150px;
        }
        #description
        {
            display: inline-block;
            float: right;
            text-align: center;
            width: 30%;
            background: #729FCF;
            margin-top: 4px;
        }
        #search
        {
            display: inline-block;
            float: left;
            width: 66%;
            margin: 30px 2%;
            text-align: center;
            background: #729FCF;
        }
        
        #search a
        {
            color: #000;
            text-decoration: none;
        }
        
        #name
        {
            display: block;
            background: #f00;
            text-align: left;
        }
   <br>
    <header>
      <img id="profilePhoto" src="https://dummyimage.com/150.png/#729FCF/#000" alt="Profile Photo">
      <div class="right-banner">
      
      <div id="description">
        FIELD1<br>
        FIELD2<br>
        FIELD3<br>
        FIELD4<br>
        FIELD5<br>
        FIELD6<br>
        FIELD7<br>
      </div>
      <div id="search">
        <a href="general/recherche.html">ACTUALLY LOOKING FOR A POST GRADUATE
        INTERNSHIP</a>
      </div>

      &nbsp;
      <p id="name">
        &nbsp;&nbsp;NAME
      </p>
      </div>
    </header>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best practice for incorporating CSS and JavaScript files into a PHP template?

I've created a basic template for my PHP website, but I'm struggling to find the best way to include my CSS and JavaScript files. Take a look at my index.php file below: <?php include'core/template.php'; $temp=new Template(); $sett ...

javascriptphphtmlcss

The webpage is displaying an error stating that "<function> is not defined."

I recently duplicated a functional web page into a new file on my site. However, after adding a new function and removing some HTML code, the JavaScript function no longer runs when clicking one of the two buttons. Instead, I receive the error message "Beg ...

javascripthtmlfunction

Tips for keeping my wordpress menu at the forefront

This piece of code is responsible for controlling the main menu on my website. Currently, it's set up so that when I scroll down, the menu disappears, and when scrolling up, it reappears. However, I would like the menu to always remain displayed at t ...

jquerycsswordpress

Disabling padding on TwitterTweetEmbed component in React Twitter Embed

Having an issue with Material UI and React Twitter Embed, unable to remove top and bottom margins. Here's the code snippet causing concern: const styles = theme => ({ listItem: { padding: '0px', }, tweetSize: { margin: 0, ...

cssreactjstwittermaterial-ui

What methods can be used to cloak JavaScript functions from the end user?

Looking to utilize jQuery AJAX calls? Here's an example: function addNewTeacher(){ $.ajax({ type: "POST", url: "/actions/dboss/newteacher.php", data: "uname=" + $("#newteacheruname").val() + "&upass=" + $("#new ...

javascripthtmlajaxfunction

Adding material-ui library to a stylesheet

Can I include @material-ui/core/colors/deepOrange in my CSS file? I want to import this library and use it as shown below: import deepOrange from '@material-ui/core/colors/deepOrange'; import deepPurple from '@material-ui/core/colors/deepPu ...

cssmaterial-ui

The form embedded within the <tr> element seems to be malfunctioning

Hey there, I'm facing a little issue with my form that is nested inside a table content. It seems to not be working properly. Let me share the code snippet below: <table> <form name='editpo' method=POST action='js_buat_po.php? ...

htmlformshtml-table

Text overlapping image causing hover state interference

I'm feeling completely lost right now. My goal is to have the title of each project displayed in the center of the screen when you hover over the respective project images. I've resorted to using jQuery for this because it seems like the most str ...

jquerycssimagetypeshover

Seeking the "onChange" functionality while implementing the "addEventListener" method

I've been busy with a React project lately. Instead of adding 'onChange' to each button within the html object like this: <input type='text' onChange={myFunction} /> I'd prefer to include it in the JS code like so: doc ...

javascripthtmlreactjs

What's the best way to add vertical space to my DIV containing buttons?

Here is an example of HTML with CSS classes that float elements left and right: <div class="block-footer"> <button class="medium float-left">A</button> <button class="medium float-left">A</button> <button class="m ...

htmlcss

What is the best way to eliminate the blue outline around an image map?

On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...

htmlcss

Repairing the Performance of the 'Save' Feature

Can the 'Save' button in my code save team assignments for players selected using drag and drop? I'm considering using localStorage, but unsure about implementation. Note: To run the code properly, copy it as an HTML file on your computer. ...

javascriptjqueryhtmlcss

Concealing a Parent Container Using jQuery

I've been attempting to hide a certain div with a value of 9, but my current method doesn't seem to be working... The Hide Function I'm Using: <script> $('.hhpt-housebox').each(function() { if($(this).val() < 9 ...

htmljquery

Error: Unable to Locate CSS File for Wordpress Elementor

Currently in the process of transferring a WordPress website that utilizes Elementor. Successfully migrated both the code and database over. However, upon inspecting the page, I encountered a 404 error indicating that a css file associated with Elementor c ...

csswordpresselementor

Is there a way to display the avatar image outside of the drawer in MUI ReactJS?

Currently, I am attempting to display the avatar image with a curved effect outside the border line of the sidebar. I have referenced the persistent drawer from MUI v5 for inspiration. You can view an example here: the codesandbox link The desired outcom ...

cssreactjsflexboxreact-hooksmaterial-ui

Steps for converting a window to a PDF file rather than an XPS file

Whenever I attempt to print the contents of my HTML page using window.print(), it always creates an XPS file. However, what I really need is for it to generate a PDF file instead. Any assistance would be greatly appreciated. Thank you! ...

javascripthtmlpdfprintingpdf-generation

Nested Tables in JavaScript: Creating Tables within Tables

Recently, I have been analyzing student data and noticed a recurring structure. While preparing to present information on student performance within the discipline, I also became interested in showcasing a history of new students. It was suggested that hav ...

javascriptcsstreeviewsyncfusiontreetable

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

javascripthtmlcssdojo

Issue found in Bootstrap-Multiselect plugin: The dropdown menu appears beneath the outer container when overflow-y is applied

My experience with using Bootstrap-Multiselect and encountering an issue where the dropdown disappears when the outer container has overflow-y: scroll and a max-height has prompted me to seek solutions. I am looking for a way to ensure that the dropdown is ...

jqueryhtmlcsstwitter-bootstrapbootstrap-multiselect

Attach [!hidden] to a dropdown menu choice using Angular 2

How can I implement a show/hide feature for a select box in Angular 2+? Here's what I have so far: <select> <option disabled selected>Flow progress</option> <option *ngFor='let flow of flows'>{{flow}}< ...

htmlangulartypescriptangular2-forms