What is the best way to align an HTML DIV with a logo on the left side?

I am trying to position a div called #top_menu in the center of the page.

<div id="top_menu">This is the menu and it is centered on the page</div>

Here is my CSS code:

#top_menu { margin: 0 auto; width: 600px; ... }

Next to the top menu, I want to have a logo (#logo).

This is what I have implemented so far:

#logo { position: absolute; top: 0px; left: 10px; width: 200px }

However, I am facing an issue:

If the browser window's size is smaller than 800px, the centered div overlaps with the logo div. I would like there to be scrollbars instead. How can I achieve this?

Thank you for your help! - Freddi

htmlcsslayoutcentergraphical-logo

Answer №1

Follow these steps:

#top_menu{
    width:800px;
    margin:0 auto; 
    border:1px solid red;
    display:block;
}

#logo { 
    float:left;
    width: 200px;
    height:50px;
    background:white url(logo.png) no-repeat 0 0
}

By doing this, your divs will remain separate even on smaller window sizes.

To see a working example, visit http://jsfiddle.net/WV8q7/3/

Answer №2

Give this a shot (in CSS):

#top_menu { overflow: auto; }

Make sure to include your logo tag within the div tag.

Answer №3

Understood:

#logo
{
    float: left;
}

ALSO

#top_menu
{
    margin: 20px auto 0;
    height:29px;
    width: 602px;
}

HTML

<div id="logo"><img src="<?=site_url('img/logo.jpg')?>" /></div>

        <div id="top_menu">



            <ul id="top_links">
                <li><a href="<?=site_url()?>">Homepage</a></li>
                <li><a href="<?=site_url('static/impressum')?>">Impressum</a></li>
            </ul>
        </div>

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

Update the color of the text depending on the background color

When hovering over my CTA, a sliding effect occurs. However, I am facing an issue with the text being difficult to read depending on the background color. To better understand what I'm trying to achieve, you can view the demo here: Demo on CodePen T ...

javascriptcss

Tips for arranging divs in CSS grid with grid-template-areas technique

I am attempting to organize similar groups of elements in a grid: #grid { position: absolute; left: 135px; top: 158px; width: 1080px; height: 1035px; display: grid; grid-template-rows: 99px 1fr 1fr; grid-template-column ...

htmlcss

Arrange two divs on either side of the center div when on a smaller screen

Looking for a straightforward approach to achieve this. Imagine it as follows: [A][__B_][A] to [A][A] [__B_] I hope that explanation is clear, but I'm happy to provide more details if necessary. Thank you in advance! ...

htmlcss

Adjusting the color of a cell based on its value

Currently, I am in the process of converting a CSV file to an HTML table by utilizing a tool available at . However, I am facing a challenge in modifying the background color of cells based on their values. I would greatly appreciate any help or guidance w ...

javascripthtmljquerycss

What is the method to use Python in writing content within a <div> tag?

Edit To tackle this issue, I have discovered that the sned_keys() method of the selenium driver can provide a solution. Currently, my focus is on creating a webwhatsapp spamming script and the task at hand involves: <div class="input" contenteditable= ...

pythonhtmlseleniumselenium-webdriver

The container or row I placed in the middle of the page content is not anchored to the bottom like it should be for footer widgets

I'm struggling with the code I've extracted. How can I move the footer widget to the bottom of the page? On some pages, the footer displays at the bottom because there isn't much content, but on one specific page, it appears in the middle of ...

csswordpresstwitter-bootstrap

How can a div tag and its class be nested using CSS in Angular?

Can someone help me with nesting a div tag with the "error" class in CSS? <div [class]="{error: condition}">{{ message }}</div> I want to know how to have the .error selector inside the div selector in the CSS file. Note: The error ...

cssangular

Issue with AngularJS $http not responding to ng-click after first call

My landing controller uses a service that initiates the $http call by default when the App loads. However, I need to pass parameters based on click events, so I implemented an ajax call on ng-click. The issue is that I keep receiving the same data on ng-c ...

javascriptangularjsnode.jshtmlexpress

The vanishing act of custom fonts in Internet Explorer

This issue with a custom font embed is new to me. I have successfully used custom fonts on many client sites without any problems. One specific client has their own custom font files that are causing trouble. The application in question is embedded in an ...

cssinternet-explorercachingfont-face

The origin of the distribution file diverges from the source path of the development

Currently, I have implemented a task runner with Gulp to export all my folders into a distribution folder. However, an issue arises when exporting images to the distribution folder as the path name differs from what is specified in my source files. For ins ...

htmlimagenpmgulp

The selection feature is not supported for the type of input element in jQuery

I'm currently attempting to utilize AJAX to send a form with jQuery. However, upon clicking the submit button (which is technically a link), I encountered an error. The error displayed in the console is as follows: Failed to read the 'selection ...

javascriptjqueryhtmlajax

Send an AJAX parameter and retrieve it on the expressjs server side of the application

It seems like there's a crucial piece missing here. Let's begin with an AJAX call that can be executed in the <script> tag to send data to the backend. It might look something like this: function changeDom(){ console.log('connectin ...

htmlnode.jsajaxexpress

Using ReactJS and JavaScript to transform an array into a fresh array

I am working with an array that looks like this: var oldArray = [ {number: '12345', alphabet: 'abcde'}, {number: '54321', alphabet: 'abcde'}, {number: '67891', alphabet: 'abcde'}, ...

javascripthtmlarraysreactjs

Border provides spacing within a div using the box-sizing property set to border-box

I am facing an issue where I have a div with the class "outer" containing another div with the class "inner". Upon adding a 2px border to the "outer" div, padding is automatically applied in a way that appears as 1px padding on the top, left, and right sid ...

htmlcsscss-position

Tips for ensuring Node.js waits for a response from a substantial request

When uploading a large number of files, the process can take several minutes. I am currently using a multi-part form to post the files and then waiting for a response from the POST request. However, I am facing issues with timeouts and re-posting of files ...

javascripthtmlnode.jsexpressmultipartform-data

Exploring the power of nested styled components in Material UI is a great way to elevate the styling of your project

Can someone explain how to access a second styled component using '@mui/system' in order to add a hover effect to a parent element that will modify the max-height of its child? Please keep in mind that I am referring to mui's styled compone ...

cssmaterial-ui

Trouble expanding Bootstrap Dropdown menu on mobile devices

I am currently facing an issue with a Bootstrap navbar that includes a dropdown menu for selecting courses. On my desktop, everything works perfectly fine when I click on the courses tab. However, when I try to select a course on mobile, nothing happens. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Switch up the picture when you press on it

I have a task involving a table where I want to switch out an image in the <td> when it is clicked, using a URL that I specify beforehand. The URL of the image will be provided when clicking on a link within the page. For example: index.html?type=d ...

javascripthtml

"Efficiently trimming off any text past the final character using

I have a variable in Smarty named {$url} which contains the following URL: $url = https://www.example.com/?parameter=hello:world:itsme I need to remove everything after the last ":" in the URL. The desired output is: $result = https://www.example.com/? ...

phphtmlurlsmarty

Collaborating with interactive icon in input group

I'm having trouble getting the textbox and icon to be in the same line, like a bootstrap input group. The icon is also clickable. <div class="input-group"> <asp:textbox id="txtParentCategoryCode" runat="server" cssclass="input-text normal" m ...

cssasp.netfont-awesome