What is the best way to ensure that when a div is opened, the information to the right does not get pushed down?

I have a functioning menu bar, but when it expands, the content below is pushed down even though it should not be affected. How can I adjust my code to prevent this issue?

View my website here: 

<div id="menu_wrapper">
<div id="menu">
<div style="float:left;" id="menu1outer">
<a href=""><div class="menus"> <img src="images/menu.png" class="lines"></div></a>
<div id="submenus1" class="submenus">
<div id="left_menu_inside">
<p class="categories">Categories</p>
<ul id="menu_inside">
<li>Top Articles</li>
<li>Movies & Television</li>
<li>Science</li>
<li>Sports</li>
<li>Tech</li>
<li>Video Games</li>
<li>More...</li>
</ul>
</div>
</div>
</div>
<ul id="other_links">
<li><a href="">My Profile</a></li>
<li><a href="">Forums</a></li>
<li><a href="">Help</a></li>
</ul>
</div>
</div>

#menu_wrapper{
width:870px;
height:80px;
float:left;
margin-top:0px;
}

#menu{
width:600px;
height:40px;
float:left;
margin-left:5px;
margin-top:55px;
}

ul#other_links{
float:right;
margin:0
list-style:none;
margin-top:-5px;
}

ul#other_links li{
font-family: Tahoma, Geneva, sans-serif;
font-size:15px;
margin-right:15px;
margin-top:-20px;
display: inline-block;
}


ul#other_links li a {
color: white;
padding: 5px 10px;
text-decoration: none;
}

ul#other_links li a:hover {
background-color:black;
padding: 5px 10px;
}

.menus {
width:100px;
height:40px;
text-align: center;
background-color:#42618f;
border-right:1px solid #2b3f5d;
border-left:1px solid #2b3f5d;
border-top:1px solid #2b3f5d;
float:left;
margin-top:-16px;
margin-left:30px;
}

.lines{
margin-top:6px;
float:right;
margin-right:2px;
}

.menus a{
font-family: Tahoma, Geneva, sans-serif;
font-size:10px;
}

#menu1outer a{
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
color: white;
text-decoration:none;
line-height: 50px;
}

#menu_inside{
float:left;
}

#left_menu_inside{
float:left;
width:175px;
height:300px;
}

.submenus {
display:none;
width:585px;
height:300px;
text-align: center;
color: white;
background-color:#42618f;
border-right:1px solid #2b3f5d;
border-left:1px solid #2b3f5d;
border-bottom:1px solid #2b3f5d;
font-family: Tahoma, Geneva, sans-serif;
font-size:14px;
margin-top:25px;
margin-left:30px;
}

#menu1outer:hover #submenus1 {
display: block;
}

ul#menu_inside{
text-align:left;
margin-top:-10px;
padding-bottom:10px;
float:left;
color:#dadada;
}

ul#menu_inside li{
list-style-type:none;
padding-bottom:5px;
}

.categories{
font-family: Tahoma, Geneva, sans-serif;
float:left;
font-size:20px;
padding-bottom:10px;
border-bottom:1px solid white;
width:175px;
text-align:left;
margin-left:10px;
}
htmlcss

Answer №1

The issue at hand is that you are attempting to show an element with a position:static, causing it to take up space and push other elements around. To resolve this, update your CSS with the following rules:

#menu1outer {
    position: relative;
}
.submenus {
    display: none;
    width: 585px;
    height: 300px;
    text-align: center;
    color: white;
    background-color: #42618f;
    border-right: 1px solid #2b3f5d;
    border-left: 1px solid #2b3f5d;
    border-bottom: 1px solid #2b3f5d;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    margin-top: 25px;
    margin-left: 30px;
    position: absolute;
    left: 0;
    top: 0;
}

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 could be causing my HTML form elements to shift position when I click on them in Internet Explorer 8?

I'm facing an issue with my HTML form that has multiple input fields (text and select types) arranged in pairs on each row. Surprisingly, everything works fine in all browsers, including IE7. However, when it comes to IE8, I encounter a peculiar probl ...

htmlcssinternet-explorer-8formsinput-field

The custom directive in Vue utilizes the refreshed DOM element (also known as $el)

I am looking to create a custom directive that will replace all occurrences of 'cx' with <strong>cx</strong> in the Dom Tree. Here is my current approach: Vue.config.productionTip = false function removeKeywords(el, keyword){ i ...

javascripthtmlvue.jsvuejs2

Monochrome tabletop solid in one hue

I'm trying to eliminate the space between the columns in my table so it looks solid. Here's the CSS style I've been using: <style> tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:90%;background:transparent;} table{ margin: ...

htmlcss

Using Regular Expressions for Customized Formatting

I'm faced with a challenge involving a highly organized HTML string that contains numerous hyperlinks. I need to transform all of these links into bold text containing the word "XX1". Is there a way to accomplish this in PHP without relying on jQuery ...

phphtmlregex

Creating a function for loading dynamic content in XSLT can be achieved by following these steps

When I call the function collapseandexpand() for static elements only, it does not work. Now, how can I create the same function to handle dynamic content in xslt? Javascript Code: <script language="javascript" type="text/javascript> <xsl:text&g ...

javascripthtmlxslt

"Strategies for using Selenium in Python to simulate clicks without relying on class, id, or name attributes

I am currently attempting to locate the "X" button and click on it, but I am struggling to find a way to do so. Below is the HTML code for the element: <div style="cursor: pointer; float:right; border-radius: 3px; background-color: red; font-size: ...

javascriptpythonhtmlselenium

How can CSS be used to format an unordered list around images?

Can anyone suggest ways to improve the formatting of this HTML list when wrapping around a left-floated image? I often encounter this small problem while working on client websites: The image has a right-margin, but it doesn't seem to affect the ... ...

htmlcsshtml-lists

The property 'scrollHeight' is undefined and cannot be read

I've created a messaging system using javascript and php, but I'm facing an issue. When new messages are received or the chat log grows longer, it creates a scrollbar. The problem is that when a new message arrives, the user has to manually scrol ...

javascriptphpjqueryhtmlcss

Tips for displaying a table with a button click

I am struggling to figure out how to embed a table inside a button in order to display the table when the button is clicked and hide it when clicked again. Below is the code I have been working with: function toggleTable(){ document.getElementById ...

javascripthtmlcss

Discovering when the DOM has finished rendering in AngularJS with ng-repeat

I am looking for a way to trigger an alert or message upon completion of rendering in my HTML DOM using AngularJS, specifically when dealing with multiple ng-repeats. HTML Code: <body> <div ng-controller="Ctrl"> <div ng-repeat= ...

javascriptjqueryangularjshtml

Is it acceptable to duplicate and replace content directly from the Google Inspector tool?

As I work on creating a new woocommerce checkout page, I encountered some issues. My approach to extracting code from woocommerce involved inspecting the Code and copying it directly into my checkout file at /woocommerce/checkout/checkout.php. Is this met ...

phpcsswordpresswoocommerce

Exploring ways to animate a conditionally displayed component when the state changes using a combination of javascript and css

I am encountering a scenario where I have a react component with a specific part that is rendered conditionally. Upon clicking on a visible element within the component (button), the state changes triggering the display of the hidden parts. However, inst ...

cssreactjs

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

javascripthtmlangulartypescript

Flexbox layout to achieve equal height columns with content centered

In search of a solution to create two columns with equal height and center-aligned content within each column, while also maintaining different widths. Issue: The challenge lies in achieving both 'equal height' and 'middle aligned' at ...

htmlcssflexboxsemantic-ui

Error: The module you are trying to import from the package is not found. Please check the package path and make sure that

I encountered an issue when trying to compile a code in Reactjs. As a beginner in Reactjs, I'm struggling with this. Module not found: Error: Package path ./cjs/react.development is not exported from package /Users/mansi/letsgrowmore/to-do-list/my-rea ...

javascripthtmlcssnode.jsreactjs

Essential Understanding of HTML Query Strings Required

As a newcomer to the world of web design, I have taken on what seems like a challenging task for me: creating a webpage that can send a query string to the German Railway website (bahn.de) with the parameters I input. My question now is whether there is a ...

javascripthtmlstring

Invoke data-id when the ajax call is successful

Initially, there was a smoothly working "like button" with the following appearance: <a href="javascript:void();" class="like" id="<?php echo $row['id']; ?>">Like <span><?php echo likes($row['id']); ?></span ...

javascriptjqueryhtmlcssajax

Using HTML and CSS to create a line break between div elements

Currently, I am working on a page that allows users to post comments. However, I have encountered an issue with the div element that contains the posted message. When the message is too long and lacks line breaks, a horizontal scrollbar appears. I would li ...

asp.nethtmlcss

Is it just me, or does the float left - float right combination only break in IE

Oh dear, it seems like IE9 is causing some trouble again. The other "capable" browsers handle this HTML just fine, including IE8 which isn't even that great. Here's the code snippet: <div class="contact_info_city" id="contact_info_cityX"> ...

htmlcssinternet-explorercss-floatline-breaks

How can you utilize jQuery to eliminate specific select field values from the DOM prior to submission?

I am currently working on a Squarespace form that utilizes jQuery to show/hide specific fields in order to create a customized form using the show(); and hide(); functions. $(".option2 select").hide(); The issue I am facing is that simply hiding the fiel ...

jqueryhtmlcsssquarespace