Best practices for arranging several divs with CSS

I am in the process of creating a main header for several web pages I'm working on. The layout I have in mind includes an image, centered text below the image (all to the left of the main header), a main header that I want to be in the center of the page, and two links (home and contact us) positioned to the right of the main heading. Here is the HTML and CSS code I've written so far:

<div class="header">
<div class="logoHeader">
<img src="6.jpg">
<p> My Image Header </p>
</div>
<h3> Page Header  </h3>
<a href=""> Home Page </a>
<a href=""> Contact Us </a>
</div>

div.logoHeader {
width: 125px;
}

.logoHeader img {
margin: auto;
display: block;
}

.logoHeader p {
margin: auto;
font-size: 70%;
text-align: center;
font-weight: bold;
}

While this code centers the text below the image correctly, I am struggling with aligning the main header in the center of the page, positioning the links to the right of the header, and finally centering the header div itself. Ultimately, I want the layout to look like this:

     IMAGE                   
     Image            Main Header (centered within middle of img)       2 links

(text centered under image)

I am looking for assistance in achieving this layout where everything is centered on the window. Any help or guidance would be greatly appreciated.

htmlcssstyles

Answer №1

Here's a technique to center the page header using CSS. The logo and name are floated to the left, while the links are floated to the right. The text-align:center and display:inline properties are used for centering.

/* CSS */
.header {
    background:grey;
    display:inline-block;
    width:100%;
    text-align: center;
}
.logoHeader {
    width: 125px;
    float:left;
}
.pageHeader {
    display: inline;
    margin: 0 auto;
}
.headerLinks {
    float:right;
}
.logoHeader img {
    margin: auto;
    display: block;
}
.logoHeader p {
    margin: auto;
    font-size: 70%;
    text-align: center;
    font-weight: bold;
}

/* HTML (slightly changed) */
<div class="header">
    <div class="logoHeader">
        <img src="6.jpg" />
        <p>My Image Header</p>
    </div>
    <h3 class='pageHeader'>Page Header</h3>  
    <div class='headerLinks'>         
        <a href="">Home Page</a>
        <a href="">Contact Us</a>
    </div>
</div>

Demo here

EDIT

If you want a more even vertical spacing without hardcoded paddings, you can try a table format approach instead. Adjust the widths accordingly to achieve your desired layout.

.header {
    background:grey;
    vertical-align:middle;
    width:100%;
    padding:15px;
    display:table
}
.header * {
    display:table-cell;
    width:33.3%;
    vertical-align:middle;
}
.logoHeader img {
    margin: 0 auto;
}
.logoHeader p {
    display:block;
    margin:0 auto;
    font-size: 70%;
    text-align: center;
    font-weight: bold;
}
.pageHeader {
    text-align:center;
}
.headerLinks {
    text-align:center;
}

Demo of tabular approach

Although some people discourage using tables for layout purposes, in cases like navigation, it may be a suitable choice. Alternatively, consider using flexbox with 

display:flex; justify-content:space-around
.

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

Struggling with Implementing Modals in Bootstrap 3.3.7

I've been encountering an issue with modal functionality. In order to troubleshoot my own modals, I decided to replicate the modal example code from Bootstrap's website into a new HTML file. Despite linking to the CDN, the modal does not functio ...

htmlcsstwitter-bootstrap

What is the best way to maintain consistent scaling for elements of varying widths and heights?

I'm searching for a method to evenly scale my elements regardless of their width and height. I don't want them to be proportional to their size. Check out the JSFiddle version body, html { height: 100%; width: 100%; margin: 0; backgro ...

csssassscale

Encountering difficulties with the mobile display of a Wordpress theme

I am currently working with the megashop theme on WordPress and I have a few queries that need addressing: Is there a way to modify a specific setting exclusively for views smaller than desktop size, without impacting the desktop view? For example, the m ...

phphtmlcsswordpresstwitter-bootstrap-3

The best approach to incorporating interactive animation in next.js

My vision is to develop a character creation application using next js. The app should empower users to customize the character using sliders and gender selection buttons. The ultimate goal is to have a 2D animated version of the character that dynamicall ...

javascriptcssnext.jsfrontendcss-animations

A guide to displaying the date retrieved from a JSON data file API request using JavaScript

How can I display the date from a JSON data file API call using JavaScript? I am facing difficulty in showing the date on the dashboard display page. I am utilizing JavaScript with async-await for calling the API, and Bootstrap 4 for design. The function ...

javascripthtml

Is it possible to create a pure CSS responsive square that is positioned to the top right of a div element of any size?

My current goal is to achieve the following task... I aim to position a square perfectly in one or both corners of the top right section of a div, ensuring it never exceeds the boundaries regardless of the div's size or dimensions that necessitate th ...

htmlcssgradient

Switch up the positioning of elements using jQuery

My webpage contains multiple elements that are absolutely positioned with the CSS attribute "top." I am looking to adjust the top position of each element by 20px. This involves retrieving the current top position and adding 20px to it. The quantity of e ...

javascriptjqueryhtmlcss

Tips for choosing an option from a react dropdown using Cypress

Exploring Cypress: I am currently working with the following code snippet. Although it seems to be functioning, I have a feeling that there might be a more efficient way to achieve the desired result. There are 25 similar dropdowns like this one on the pag ...

cssxpathcypress

Is there a way to extract information from a <span> element with restricted access?

I'm currently utilizing bs4 and urllib2 to extract data from a website. Check out the webpage here. The goal is to retrieve the remaining digits of the telephone number 3610...... but beforehand, it's necessary to click on a button to reveal th ...

pythonhtmlweb-scrapingbeautifulsoup

What is the best way to load my CSS file using express.static?

How do I properly load my CSS file using express.static in Node.js? I have attempted various methods to link my stylesheet to my HTML file through Express, and I'm also interested in learning how to include images, JavaScript, and other assets to crea ...

javascripthtmlcssnode.jsexpress

The issue with the <Button> component not properly linking in next.js

Having trouble with a button wrapped inside a custom Navbar component. The code snippet in question is: <NavBtn> <Link href="/contact" passHref> <Button> Contact Me </Button> </Link> & ...

javascriptcssreactjsnext.jsstyled-components

Run a JavaScript function in 5 seconds

I'm looking to execute this function after a 5-second delay: $(document).ready(function() { $("#signInButton").trigger('click'); }); Your assistance is greatly appreciated. ...

javascriptjqueryhtmlajaxclick

What is the best way to prompt users to submit comments with a popup textarea box?

Within my project, I have incorporated a dropdown list: <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject <span class="caret"></span> </but ...

javascriptjqueryhtmlcssforms

When adjusting to mobile dimensions, the responsive website design struggles to center the navbar properly

I am currently developing my senior year portfolio website and I am struggling to center the navbar (Work About Contact) when it is in mobile mode. My goal is for it to be positioned directly below the logo, perfectly centered, but so far nothing I have tr ...

htmlcssiphoneresponsive-designmedia-queries

Steps to insert a new row for a grid item using material-ui

When it comes to breaking a line of grid item like this, the image shown below illustrates how the rest space of the grid should be empty. https://i.stack.imgur.com/pvSwo.png <Grid container spacing={3} <Grid item xs={12}> "Grid Item xs ...

cssreactjsflexboxmaterial-uicss-grid

How to emphasize a portion of an expression in AngularJS using bold formatting

I have a specific goal in mind: to emphasize part of an angular expression by making it bold. To achieve this, I am working with an object obj which needs to be converted into a string str. obj = $scope.gridOptions1.api.getFilterModel(); for (var pr ...

javascripthtmlangularjsangularjs-scope

Navigate to the line situated at the exact midpoint vertically

I have a div with child elements, each containing a line of text. <div id="aboutxt"> <div class="line">TEXT_LINE_ONE</div> <div class="line">TEXT_LINE_TWO</div> <div class="line">TEXT_LINE_THREE</div> ...

jquerycss

Scala Play templating with vararg HtmlContent allows for dynamic generation of

I have a standard template in play 2.6, where I need to pass in a variable number of HtmlContents. The template is defined like this (including the implicit parameter): @(foo: String)(content: Html*)(implicit bar: Bar) When working with the template, I c ...

htmlscalaplayframeworkvariadic-functionstwirl

Animate a div once the parent section becomes visible while scrolling

I previously had this function working, but it seems that I have somehow messed it up in the process. My current setup includes a scroll hijack feature that navigates users to a new section or card each time they scroll. The script adds a visible class w ...

javascriptjqueryhtmlcssscrollview

Troubleshooting a Problem with the Horizontal Scrollbar in Dynamic jqGrid

Currently, I am working on an ASP.net MVC project where I have implemented both dynamic and static jq grids. However, I am encountering an issue with the horizontal scroll bar in my application. To address this problem, I attempted to modify the overflow ...

javascriptjquerycssasp.net-mvc-4jqgrid