Positioning nested DIVs using HTML5 and CSS3

/* HTML */
<header role="heading">
    <div class="logo">
        <h1><a href="/">this is the banner</a></h1>
    </div>
<header>

/* CSS */
header
{
    background-color: rgb(255, 165, 0);
    height: 160px;
    width: 100%;
}

header .logo
{
    margin: 30px auto;
    width: 980px;
}

My expectation was for the .logo element to be centered inside the header, but it seems to be pulling the header down by 30px from the top.

I attempted to make the header position:relative, but that caused the centering (margin: 30px auto) not to function correctly.

If anyone has any advice on how to resolve this issue, I would greatly appreciate it!

htmlcsspositioning

Answer №1

There are instances where the margin can impact the parent element too. My suggestion would be to maintain the same markup and apply padding to the container rather than using margin on the child element.

/* CSS */
header
{
    background-color: rgb(255, 165, 0);
    height: 160px;
    width: 100%;
    padding:30px 0px; /* Opt for padding in this case*/
}

header .logo
{
    margin: 0px auto; /* Use padding instead of margin here */
    width: 980px;
}

Answer №2

Feeling a bit silly, but after submitting my question I quickly found the solution... I employed margin: 0 auto to center the element with class .logo and padding-top: 30px to adjust its position.

Apologies for any inconvenience! Maybe this tip will be beneficial for someone else.

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

Arranging an image next to a form with rows

Note: Utilizing Bootstrap Framework This is the design I am aiming for: https://i.sstatic.net/vAhzY.png Code: <!DOCTYPE> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <style> ...

htmlcss

Creating a dynamic input box that appears when another input box is being filled

I have a form set up like this: <FORM method="post"> <TABLE> <TR> <TD>Username</TD> <TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD> </TR> <TR> <TD>A ...

phpjavascripthtml

Centering text in a pseudo element vertically

I’ve been trying to find a way to centrally position vertically an ::after pseudo-element that includes text (a content attribute). Previous inquiries: I reviewed some previous inquiries on this topic, however, none of the solutions seem to apply to thi ...

htmlcssvertical-alignment

Utilizing the mouse hover feature to toggle between hiding and displaying content in its original position

I am struggling with creating a mouse hover function that allows me to hide and show two pictures in the same position. Essentially, I want one picture to stay in place while another picture appears on top of it when hovered over. Both pictures should be t ...

htmlcssmousehover

Expand and collapse button for viewing more content

I need help figuring out how to display a list of 10 items on my website. I want to show only three items initially, with a "View More" button that, when clicked, will reveal the remaining items. The button should then change to "View Less" so users can ea ...

javascriptjqueryhtmlcssbootstrap-4

What are the connections between osCommerce "box" files and CakePHP?

My previous experience involves working with the osCommerce shopping cart and I appreciate how they use "require" to easily add different boxes to the left or right side columns of the website. require(DIR_WS_BOXES . 'shopping_cart.php'); I am ...

phphtmlcakephposcommerce

Comparison between Static HTML controls and Razor HTML helpers.Static HTML controls are

Just starting to learn ASP.NET MVC and I've noticed that it generates controls like @Html.TextBoxFor(x => x.Name) which resemble server-side controls in web forms. Since browsers only understand HTML, these controls need to be converted to HTML bef ...

c#asp.netasp.net-mvchtmlrazor

Delete the element that was generated using jQuery

Is there a way to add and remove an overlay element using JavaScript? I am struggling to get JavaScript to remove an element that was created with JavaScript. Any suggestions? Check out this JS Fiddle example Here is the HTML code: <div id="backgroun ...

javascriptjqueryhtmlappend

What are the steps for increasing text input size on an html page?

I was actually using w3schools, so I'm a bit lost now. On this repl called BatCoder, you can write and save Bat files. And currently, I need to expand the text input! Would really appreciate any help as I am still learning how to code. No errors, j ...

htmlreplit

Issue with drop-down menu functionality on mobile-friendly website

After deciding to revamp my website for responsiveness, I encountered an issue with the menu not displaying on smaller screens. Everything else is functioning correctly except for the drop-down menu! Here is the HTML code: <!doctype html> <html ...

jqueryhtmlcss

Angular: Discovering and retrieving all images within a div container

I am on a quest to locate all image tags within a specific div. These image tags are nested within paragraph tags inside the div. I attempted to create a plunkr to accomplish this task, but unfortunately, I haven't had any success yet. If anyone is ab ...

javascriptjqueryhtmlangularjs

What is the method for adding data to a table without utilizing an ID field?

Here is the code I have written: This table contains details of the candidates: <table id="candidates-table" class="table table-striped table-bordered"> <thead class="thead-dark"> <tr> <th scope="col">Candidate Picture ...

javascripthtml

Is there a way to deactivate the spin buttons for an input number field?

Is there a way to create an input element with type number in Vue using createElement() in TypeScript and then disable the spin buttons for increment and decrement? I attempted to use the following CSS: input[type=number]::-webkit-inner-spin-button, input ...

htmltypescriptvue.js

Tips on customizing Char.js doughnut charts

How can I make the doughnut thinner while keeping it thicker? What adjustments should be made? I attempted to implement changes and it worked successfully, but now I need to adjust the width. How can I do this? TS File. import { Component, OnInit } from ...

javascripthtmlangularreactjs

Picture is unable to load at times!

I am currently in the process of developing a website using Bootstrap and JQuery. Most aspects of the site are functioning properly, however, there is an issue with one particular image that fails to load in an unusual manner. The code snippet defining th ...

jqueryhtmltwitter-bootstrap

arrangement of form labels in material-ui

Is there a way to configure the labels in Material-ui + react forms to be displayed beside input fields for better readability? For example: name [input] title [input] instead of name [input] title [input] I have looked through the documentation b ...

cssreactjsformsmaterial-uiformik-material-ui

"Enhancing Code Readability with Language-Specific Syntax Highlighting

My goal is to develop an editor that allows users to input code in various languages by selecting an option from a dropdown menu. The code should then be automatically highlighted based on the chosen language. I am considering using Codemirror for syntax ...

javascripthtmlsyntax-highlightingcodemirrorcodehighlighter

How can I adjust a centered container div to fit properly on a mobile device

Exploring the centering of a particular div: #container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 550px; width: auto; background: rgba(28, 28, 54, 0.70); padding: 15px; border: 1px solid #1c ...

cssmedia-queries

Inserting information into a SQL database using PHP

Looking for some assistance here. I've double-checked the SQL table names multiple times, but whenever I try to post, I keep getting an error. I'm fairly new to this, so any help would be greatly appreciated. Thanks in advance. require_once(&ap ...

phphtmlsql

Creating a text container in PHP for displaying information

As someone who is new to PHP and HTML, I'm curious about the CSS statements needed to create a text box that will display a value from one of my PHP functions. Right now, the function retrieves data from an SQL server and returns it, but I would like ...

phphtmlcsstextbox