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

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

javascriptcsshtml

Samsung devices exclusively showcase background in responsive design

I am encountering a major problem with my website design, specifically with its compatibility on mobile devices. To ensure its responsiveness, I have tested the design on my iPhone, iPad, and Windows Phone. Unfortunately, since I lack an Android device, I ...

androidhtmlcssbrowser

Issues have been reported regarding compatibility between iOS7, jquery.touchSwipe, on click and webkit-touch-callout

I'm in the process of developing a web application, but I've encountered an issue with iOS7 where there seems to be a conflict between jquery.touchSwipe and my "on click" events. Interestingly, the web app functions perfectly on older iOS versio ...

jqueryhtmlcssios7

How can I configure my React Project to direct users to example.com/login.html when they land on the root URL?

My goal is to verify a user's identity through a third-party authentication server. The redirect_uri indicates that after the user logs in, they will be redirected to example.com/login.html. Inside the login.html file, there will be specific html/scr ...

javascripthtmlreactjssingle-page-application

Expanding CSS Grid to Occupy Remaining Area

I'm currently utilizing CSS grid to construct a basic 3 column layout. Here's a snippet of my code... .container { display:grid; grid-template-columns:1fr 1fr 1fr; } ...

htmlcsscss-grid

A guide on showcasing Python Flask database entries in an HTML table using Jinja 2

I have a database with a table that I need to display in my web application using a specific route. My goal is to present the data from the DB in a clear and easy-to-read table format, similar to an Excel spreadsheet, through the app. Although what I hav ...

pythonhtmlflask

Unable to use addEventListener on media queries exceeding 768px

When testing the site on Firefox 49 and Chrome 63, I encountered the same issue. Clicking on each card worked fine on iPhone4, Galaxy 5, and iPhone 8 using Chrome. However, after switching orientations from 640px to 320px portrait view, the top card would ...

javascripthtml

Creating personalized tags or components by utilizing insertAdjacentHTML in Vue

With the use of insertAdjacentHTML, I am able to create HTML elements such as div and span, but it seems that I cannot generate custom tags like <myComponent> </myComponent>. I understand that insertAdjacentHTML can create HTML elements, but a ...

javascripthtmlvue.js

The hovering effect on the image link is causing the surrounding div to stretch too far

Whenever I hover over specific points below an image link wrapped in a div, it triggers the hovering effect for the CSS-created image link. Despite trying various solutions like overflow:hidden and display:inline-block, nothing seems to resolve this issue. ...

javascripthtmlcssweb-frontend

Generate a catalog of individual files within nested folders

I have a structure: [catalogues] [catalogue-name-1] [data_html] name-1.html - table of posted values from another form name-2.html - table of posted values from another form name-3.html - table of posted values from another form ... name-n.html - ta ...

phphtmldirectory-listingfile-listing

The HTML width of 100% extends beyond the boundaries of the page

Having limited experience with HTML and CSS, I'm encountering an issue with setting the width to 100%. It seems to exceed the browser borders. Can someone check out the example below? Should I slightly decrease the width percentage, or could there be ...

htmlcsswidth

Tips for making jQuery maphilight function properly?

Can someone assist me with Mapilight? I have been trying to get it to work but no success so far. Here are the script links in the head section of my HTML. <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/ja ...

javascriptjqueryhtmlmaphilight

Using a regular expression to replace occurrences of a string in Objective-C

Can someone help me figure out how to use a regex expression to split my string that contains HTML code? NSString* regex = @"<.*?>"; NSString* html = @"<span class="test">Test1</span><span class="test">Test2</span><span cl ...

htmlobjective-cregexnsstring

Show JSON information from a jQuery post request

Greetings, I am currently working on implementing a login script using Ajax. My objective is to retrieve and display data such as email and username, and then store it in local storage. Although I can successfully obtain the data in JSON format, I want to ...

javascriptphpajaxjsonhtml

I am encountering an issue where my Vue navbar is successfully changing the route but not updating the corresponding router-view

I have been working on a single-page application using Vue and I encountered an issue with the navbar when navigating through routes. The problem is that after the first click on a navbar item, the route changes successfully but the router-view does not up ...

javascripthtmlvue.jssingle-page-applicationvue-router

What is the best way to transfer information between two views in Aurelia?

I have two different perspectives, one called logo and the other called folder. The logo view should display something from the folder view if the folder is empty. logo.html <template> <require from="company-assets/folders"></require> ...

javascripthtmlaurelia

Incorporating JQuery UI sortable functionality with the CSS grid display property to create a

I'm currently working on creating a sortable CSS grid using jQuery UI. $( function() { $( "#sortable" ).sortable({ handle: "handle" }); }); gridHolder{ display:grid; background:tan; grid-template-columns: ...

jquerycssjquery-ui

Navigation arrows for sliding`

Is there a way to add custom right/left arrows to the Ionic slider component? Demo: Check it out on Stackblitz Note: Make sure to refer to the home.html page for more details. .html <ion-slides [pager]="true" [slidesPerView]="2"> <ion ...

cssangulartypescriptionic3swiper.js

Removing page scrolling in Bootstrap 5: A step-by-step guide

I would like to ensure that only the card-body block is scrollable. Currently, the page does a bit of scrolling when the card-body block overflows (resulting in 2 scroll bars). The lorem text was added as an example of an overflow. The desired outcome is d ...

htmlcssbootstrap-5