Adjusting the sidebar's position in alignment with the left content dynamically

I have a CSS setup to showcase image content on the left with a sidebar on the right. The size and orientation of the image can vary, so I want the details sidebar to be relatively positioned next to the image.

Here is a snapshot:

The CSS code looks like this:

* {
    margin: 0;
    padding: 0;
}

a {
    /* text-decoration: underline; */
    text-decoration: none;
    color: #6B2E42;
}

a:hover {
    text-decoration: none;
}

body {
    background: #C9CFCD url(images/img01.gif);
    font-size: 11pt;
    color: #323232;
    line-height: 1.75em;
}

body,input {
    font-family: Arial, sans-serif;
}

#content {
/* HOLDS THE IMAGE */
    background: #FFFFFF;
/*  width: 595px;  */
    color: #6E6E6E;
    padding: 10px 10px 0 35px;
    float: left;
    border-bottom: solid 2px #BBC1BF;
}

#page {
    margin: 20px 0 20px 0;
    position: relative;
    width: 980px;
    padding: 0;
}

#page ul {
    list-style: none;
}

#page ul li {
    padding: 2px 0 2px 0;
    border-top: solid 1px #D9D9D9;
}

#sidebar {
    background: #FFFFFF;
    margin: 0 0 0 685px;  
    color: #6E6E6E;
    padding: 10px 10px 10px 20px;
    width: 225px;
    border-bottom: solid 2px #BBC1BF;
}

#wrapper {
    width: 980px;
    margin: 35px auto 0 auto;
    position: relative;
}

And here is how the layout looks:

<body>

    <div id="page">
        <div id="content">

                <p>
                    <img src="Mona_Lisa_by_Leonardo_da_Vinci.jpg">
                </p>

            <br class="clearfix" />
        </div>
        <div id="sidebar">
            <h3>DETAILS</h3>
            <div class="date-list">
                <ul class="list date-list">
                    
                <!-- Details of the specific image -->
                    
                </ul>
            </div>
            <h3>DESCRIPTION</h3>
            <p>
                Ut tortor odio sapien sed luctus. Duis eu purus convallis ligula tincidunt bibendum et malesuada.
            </p>
        </div>
        <br class="clearfix" />
    </div>
</body>

Please refer to the attached screenshot for a visual guide to how the layout appears in the browser.

joseph

Answer №1

Could the sidebar be positioned on the right if the picture is small, but under the image if it's large?

#page{
        width: 600px;
        margin: 0 auto;
        background-color: #efefef;
        overflow:hidden;
    }

    #content,
    #sidebar{
        float:left;

    }

    #sidebar{
        margin: 10px;
        padding:10px;
        background-color: tan;
    }

    .clear{
        clear: both;
    }

http://jsfiddle.net/sy9xM/1/ - feel free to adjust the img width to see how it renders. Does this solution work for you?

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

Adjusting the outline color of a Material UI Select component in outlined mode to a different color when the dropdown is activated (currently shown as blue)

Is there a way to change the outline color of Material-UI select component outlined variant correctly? I need help changing the default blue color to red, any assistance would be greatly appreciated Click here for an image reference Reference code snippe ...

Guide to placing an element behind text using Bootstrap 3

On my webpage, I have a straightforward Bootstrap Jumbotron displayed prominently: <div class="jumbotron"> <div class="container"> <h1>Welcome to My Wonderful Site</h1> <p>There's some information her ...

What are your thoughts on nesting an "li" tag within an "a" tag?

Consider this scenario: <ul> <a href="http://google.com"><li id="someId"></li></a> ... ... ... </ul> This is a solution I came up with to work around my current css styling. Now, I'm debating whether or not to ref ...

What is the process for combining two elements using tailwind?

I am trying to stack two elements on top of each other using tailwind CSS. Here is what I have attempted: <div class = "w-10 h-10" id="container"> <button class = "relative w-4 h-4 bg-red"> Started </button> ...

CSS: The hover effect must be triggered by a "click" event

I recently came across a helpful thread on Stack Overflow regarding CSS hover effects only triggering on click. I have implemented a Bootstrap4 dropdown-menu with a hover effect to display the dropdown items. .my-menu ul li { list-style: none; c ...

How to make QWebView background translucent

My goal is to make the background of a QWebView element transparent. +---------------------------+ | x | Window title | <<< Hidden borders and title bar +---------------------------+ view->setWindowFlags(Qt::FramelessWindowHint); | ...

Set a consistent pixel measurement for all images

I am working on a project where I have an image of a card that needs to be repeated 30 times. Each time the card is repeated, I want it to overlap with the previous card in a specific position, resembling a deck of cards. The issue I am facing is that whe ...

A guide on integrating a data deletion feature in Angular applications

On our website's edit page, there is a list of mat cards/workspaces with an edit icon in the top corner of each workspace. Clicking on the edit icon will take you to the edit page for that specific workspace. Within this edit page, there is a delete b ...

Transitioning from Bootstrap 4 to Bootstrap 5 raises concerns about container compatibility

Interested in transitioning from Bootstrap 4 to Bootstrap 5. Noticed that the container max-width appears different on the default setting. Any insight on why this is and how it can be adjusted to resemble Bootstrap 4? I'm a beginner with Bootstrap, s ...

Having trouble with Firefox not recognizing the linear gradient color in my CSS3 code

I'm working on implementing a linear gradient background using CSS, but I'm facing an issue with Firefox not displaying it correctly. body { height: 100%; /*background-color: #F0F0F0;*/ background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ ...

Is it possible to overlay color on top of a div background? (i.e. modify div color without altering the 'background-color' property)

Can you apply a color "on top of" a div's background? I'm looking to change the displayed color of a div without altering the 'background-color' value. I need to keep the background-color for comparison when divs are clicked: var pick ...

Tips for eliminating the horizontal scroll bar on a responsive background image

I'm having an issue with a full-width div containing a background image on my responsive website. Everything looks fine on desktop, but when I switch to responsive mode using Chrome Dev Tools, a horizontal scroll bar appears that I can't remove w ...

What is the best way to vertically center an item at the end of a card in Bootstrap 4?

In the process of creating a long bootstrap card containing two rows of information including a title and description, I encountered an alignment issue with the button. The button is intended to be aligned to the right of the card while remaining centered. ...

Having trouble with the filtering feature in Material UI Datagrid

I'm currently using Material UI Data Grid to display a table on my website. The grid has an additional filter for each column, but when I click on the filter, it hides behind my Bootstrap Modal. Is there a way to bring it to the front? https://i.stac ...

Is there a way to ensure the website's menu bar remains on a single line?

I'm currently working on a website and running into an issue with the menu bar. Everything looks perfect, but on larger screens or Android devices, the "Contact Us" menu item sometimes jumps to a new line unexpectedly. If you visit the webpage and tr ...

Introduce a transition effect to the MUI Chip component to enhance user experience when the Delete Icon

When the delete icon appears, it is recommended that the overall width of the chip increases smoothly rather than instantly. Here is the current code structure: CSS: customChip: { "& svg": { position: "relative", display: &quo ...

Add the application's logo image to the Ionic header along with a side menu

When attempting to place the app logo image in the center or left of the Ionic header with vertical alignment, it seems to shift to the top instead. The code I am currently using to display the logo is causing some issues: <ion-view view-title="<im ...

The Pop Up is displaying with half the page showing Opacity or Page Background

I'm currently working on a project that involves creating a pop-up window. CSS Styling <style type="text/css"> #modalPage { display: none; position: absolute; width: 100%; height: 100%; top: 0px; lef ...

Issues with borders and padding when using Bootstrap collapse in table components

I have a table nested inside another table, with a div surrounding it that has the collapse class from Bootstrap. This allows me to collapse it using the button in the first row. Here are the issues I'm facing: Is it possible to only display the ...

Implementing additional input with Jquery causes tooltips to malfunction

I am developing a form that allows users to add as many rows as needed. Each input is being treated as an array for easy data storage in the database, which is a new concept for me. $(document).ready(function() { var maxField = 10; //Limitati ...