The impact of adjusting the article's margin-top on the margin-top of

I want these two divs to have different positioning. The sidebar should remain fixed at the top. Why is the sidebar aligned with the article div instead of sticking to the top?

body{
    margin: 0;
    padding: 0;
}

div#sidebar{
    background-color: yellow;
    margin: 0;
    padding: 0;
    float: left;
    height: 100%;
    width: 200px;
    position: fixed;
}

div#article{
    background-color: blue;
    margin-left: 200px;
    margin-top: 50px;
    height: 500px;
}

HTML :

<div id="sidebar">
    sidebar
</div>
<div id="article">
    article
</div>
htmlcss

Answer №1

Give this a shot: top:-0px;. It may seem odd, but it can surprisingly do the trick!

body{
    margin: 0;
    padding: 0;
}

div#sidebar{
    background-color: yellow;
    margin: 0;
    padding: 0;
    float: left;
    height: 100%;
    width: 200px;
    position: fixed;
    top:-0px; /* <-- try changing this value */
}

div#article{
    background-color: blue;
    margin-left: 200px;
    margin-top: 50px;
    height: 500px;
}
<div id="sidebar">
    sidebar content
</div>
<div id="article">
    article content
</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

Find the ID of the clicked table row using HTML and JavaScript

Currently, I am trying to implement this code snippet: <td align="center"> <div class="dropdown"> <button onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button> <div id="@TableR ...

javascripthtml

Is there a way to smoothly scroll while resizing a div using Resizable Jquery?

I've implemented AdminLTE 3 template and added a resizable div using jQuery-UI. When I expand the div's height, the page doesn't automatically scroll down with it. I don't want to add a scrollbar to the div; instead, I want the entire p ...

phpjqueryhtmlcssjquery-ui

Python Selenium Webdriver: Issues with retrieving text content from hidden elements

I am interested in extracting data from Netflix that includes the following details: 1. Show Name 2. Season 3. Episode Name for each season 4. URL for each episode 5. Duration of each show. Selenium version: 3.141.0 Python version: 3.6.6, utilizing Chr ...

pythonhtmlseleniumchrome-web-driver

Creating an easy-to-update catalog utilizing an external file: A step-by-step guide

I am looking to create a product catalog with 1-4 products in a row, each displayed in a box with details and prices. I would like to be able to generate the catalog easily using an XML/CSV file that can be updated. Can anyone provide guidance on how to ac ...

javascriptcssxmlcsv

Exclusive to Firefox: The left and right arrows will shift the entire page

I've encountered a strange issue with my website that only seems to be occurring in Firefox. When using the mouse scroll, I am able to move up and down as expected. However, when using the arrow keys, the entire page shifts to the right in approximate ...

htmlcssfirefoxweb

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

cssvue.jsnpm

``In JavaScript, the ternary conditional operator is a useful

I am looking to implement the following logic using a JavaScript ternary operation. Do you think it's feasible? condition1 ? console.log("condition1 pass") : condition2 ? console.log("condition2 pass") : console.log("It is different"); ...

javascriptjqueryhtml

CSS rules for organizing the stacking order of elements in the SuperFish Menu with

I've been struggling with a z-index issue on a website I'm currently managing. It seems to stem from the z-index values in the SuperFish Menu and a specific div element. Despite my attempts to apply position:relative/absolute & z-index: 99999 dec ...

csswordpressz-indexsuperfish

Introducing HTML elements into pre-existing web pages

My interest lies in the idea of injecting HTML into existing web pages for enhanced functionality. Specifically, I am exploring the concept of creating a more efficient bookmarking system. As someone new to web development, I am unsure of how to achieve th ...

javascripthtml

Achieve a stunning visual effect by placing images behind the background using HTML and

I'm currently working on developing a webpage with a slideshow feature. I've decided that I want the transition between images in the slideshow to be a smooth fade effect, going from color to image to color. To achieve this, I have set up a backg ...

csshtmlimage

Manipulating the content of a specific row's table cells with a text box in jQuery Datatables

I am working with a jQuery datatable that consists of only one column. Every time a row is selected, a panel opens with a text box that automatically populates with the name of the selected td. I am trying to figure out how to edit the name of the selected ...

javascriptjqueryhtml

Issue regarding the sidebar's top alignment

Having trouble with the positioning of this sidebar. It seems to be hanging slightly over the top edge instead of aligning perfectly with it. Here's how it looks: enter image description here. CSS CODE: https://pastebin.com/RUmsRkYw HTML CODE: https ...

htmlcssbrowsernavigationsidebar

Utilizing Angular 2+ with the [innerHTML] property to incorporate HTML with added style attributes

I am currently utilizing Angular 2+ [innerHTML] input for inserting HTML formatting that includes style tags. Within my template, the code looks like this: <span [innerHTML]="someVar"></span> In the component file, I have defined: someVar = ...

javascriptcssangular

Implement a JavaScript and jQuery code that alternates between fading in and fading out every two items in a

Can someone help me figure out how to create a loop that fades in and out every 2 items from an unordered list using jQuery? I've been trying to do this, but my loop only processes one item at a time. <div> <ul> <li>item1</li ...

javascripthtmljquerycss

Deciphering HTML with AngularJS

We are currently working with AngularJS version 1.5.6 and facing an issue with HTML characters not being displayed correctly in our text. Despite trying various solutions, we have been unsuccessful in resolving this issue. We have explored numerous discuss ...

javascripthtmlangularjsdecode

Access a folder in JavaScript using Flask

I need to specify a directory in a script. $images_dir = '{{url_for('.../pictures')}}'; In my flask application directory structure, it looks like this: Root -wep.py -templates -gallery.html -static -pictures The images are stored ...

javascriptpythonhtmlflask

Incorporating a navigation bar at the top and a sidebar on the left side of the lower half of an HTML webpage

Currently utilizing materializecss and bootstrap, I am aiming to create a design that resembles: --------------------------------- --------------------------------- | | | | The objective is to split the page into two horizontal sections. The ...

htmlcsstwitter-bootstrap

Deciphering the principles of Bootstrap

I'm looking to understand more about what Bootstrap is. I know it's commonly used for styling web pages, but could you provide me with a clear explanation? Can big companies like Twitter, Facebook, or YouTube utilize Bootstrap for their platforms ...

htmlcsstwitter-bootstrap

Reducing the Bootstrap Navbar Collapse Width

After spending all day searching for an answer, I still haven't found a solution to my problem. Here is the code I am struggling with: <div class="visible-xs navbar navbar-ti navbar-fixed-top "> <div class="container"> <div class ...

cssasp.nettwitter-bootstrap

Clicking on the anchor at the bottom of the page will smoothly navigate you to the top of the page

I added an anchor at the bottom of the page. I wrapped a group of buttons with the link so that when clicked, they trigger the assigned JavaScript and scroll to the bottom of the page. However, the buttons currently execute the JavaScript but then take you ...

javascripthtml