Positioning the <div> to the left of a sidebar

I regret to inform you that I am unable to provide an answer at this time.

Below is the code snippet provided:

#wrapper {
width: 844px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#posts {
width: 844px;
float: left;
}
.entry {
border: 1px solid black;
padding: 10px;
float: left;
width: 400px;
}
#sidebar {
position: fixed;
width: 250px;
height: 100%;
top: 0px;
right: 0px;
display: table; /* needs to center stuff vertically inside of the sidebar */
}
<body>
<div id='wrapper'>
<div id='posts'>
{block:Posts}
<div class='entry'>
<!-- Tumblr posts -->
</div>
{/block:Posts}
 </div>
</div>
<div id='sidebar'>
<!-- Stuff in the sidebar -->
</div>
</body>

I am seeking a solution to keep my #posts centered within its container, even when there is no sidebar present. Currently, the content overlaps with the sidebar in the provided code.

htmlcss

Answer №1

Your question may not be entirely clear, but I've taken a shot at coding based on my understanding. Check out this link for a visual example.

HTML

   <div id='wrapper'>
        <div id='posts'>
                {block:Posts}
                    <div class='entry'>
                        <!-- Tumblr posts -->
                    </div>
                {/block:Posts}
         </div>
<div id='sidebar'>
        <!-- Stuff in the sidebar -->
    </div>
    </div>

CSS

             #wrapper {
                    width: 600px;
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    text-align: center;
                    float:center;
                }
                #posts {
                    width: 70%;
                    text-align:center;
                    background-color:yellow;
                }
                .entry {
                    border: 1px solid black;
                    padding: 10px;
                    /* float: center; */
                    width: 200px;
                    margin-left:auto;
                    margin-right:auto;
                }
                #sidebar {
                    position: fixed;
                    width: 30%;
                    background-color:cyan;
                    height: 100%;
                    top: 0px;
                    right: 0px;
                    display: table; /* needs to center stuff vertically inside of the sidebar */
                }

Adjust the width of the wrapper as needed and everything else will adapt accordingly.

For a live demonstration, check out the link provided above. I've used background colors for better visualization, feel free to remove them if desired.

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

Learn the method to display a particular post using its unique post ID

I need some help displaying two specific posts by utilizing their post IDs. I'm struggling with the code to retrieve and call these post IDs. Can someone assist me? /////////////////////////////// ////////////////////////////// <div class="foo ...

phphtmlwordpresspostcustom-post-type

Changing the format of PHP SQL results from vertical to horizontal

Is there a way to convert the vertical table generated by the following code into a horizontal one with stylish formatting? Additionally, is it possible to display certain columns in a popup window based on query parameters using jQuery or CSS? <html&g ...

phphtmlcsssql

Troubleshooting a Navbar Issue in a Custom Bootstrap Template

I am a beginner in html and bootstrap, but I recently attempted to create my own bootstrap template. Initially, I tried to work with the "starter template" code from getbootstrap.com, but after launching the code and making some changes, the navigation bar ...

htmlbootstrap-4navbar

Creating a visual representation of data using Highcharts: Learn how to display a stacked bar graph along with a line

My goal is to create a stacked graph with lines using the JSON data provided below [{ "TD": "2", "TE": "5", "TI": "3", ...

htmljqueryhighcharts

Ensure that all elements are consistently kept within a DIV container

In my experience with web development, one recurring challenge is ensuring that everything stays contained within a div element. I often encounter situations where multiple nested divs and content cause styling nightmares when elements bleed out of their d ...

htmlcss

The jQuery mouseout event is activated whenever my tooltip is hovered over

Recently, I encountered an issue with a menu that adds a https://i.sstatic.net/A0J2U.png Within the menu, there is jQuery code that functions to add a class on hover and remove it on mouse-out. The code snippet looks something like this... $(document).r ...

javascriptjquerycsstooltip

Tips for effectively sizing a logo within a Bootstrap navbar

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link ...

htmlcssbootstrap-4

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

In my Angular application, the main navigation consists of a standard toolbar positioned at the top of the page. My goal is to have this navigation bar smoothly scroll up with the user as they scroll down, and then reappear when they scroll back up. I at ...

cssangulartypescriptuser-experience

What is the best way to implement coding for portrait styles specifically on the Kindle Fire device?

Any recommendations on how to specifically code the styles for portrait orientation solely on the Kindle Fire device? ...

htmlcsstabs

Empty the password field

<input name="e_password" id="e_password" type="password" autocomplete="off" /> The password field above is causing some trouble as it gets automatically filled in Mozilla, but not in Chrome and IE11. This seems to be retaining values from previous a ...

javascriptjqueryhtml

Create a vibrant stroke and conclude with a circular marker beneath the content with CSS

Can you create a vibrant line with a dot underneath text using CSS, similar to the example shown in the image? The underline should begin with some spacing or padding. .underline { text-decoration: underline; text-underline-offset: 10px; displa ...

htmlcssbootstrap-5

Is there a quicker method than using document.getElementById('element-id').innerHTML to retrieve content?

Currently, I am developing a user-friendly step-by-step wizard for my website to gather information about custom orders. Utilizing JavaScript, I have been tasked with updating the content of each "page" using the document.getElementById('element-id&ap ...

javascripthtml

Ways to hide menu click when hovering over it

As a beginner, I have created a menu that shows options on hover and click. However, I am encountering an issue where clicking on one menu option and then hovering over another menu creates two lists of options. Is there a way to make the clicked menu opti ...

jqueryhtmlcsshoverclick

What is the best way to ensure uniform header height on cards or similar elements using flexbox?

Avoid using hacks Do not hard code the solution. The goal is to create a solution that works for dynamic content and responsive screen sizes, rather than just one specific case. The issue lies in the fact that the headers are not direct children of the e ...

jquerytwitter-bootstrapcssflexbox

Swapping the icon in the panel heading of Bootstrap 3 Collapse based on its collapse status

Despite many attempts, I haven't been able to make any of the provided answers work in my code. My setup involves using Bootstrap 3 panels and collapse functionality to display advertisements. In the default view, only the advertisement heading is vi ...

javascriptjquerycsstwitter-bootstrap

Apply a class to a div element when the WooCommerce cart is devoid of any items

Is there a way to apply a class or style to an element that displays the cart count only when the cart is empty? Currently, I have the following code in my header.php file which shows the cart count correctly, but does not update the color: header.php ( ...

phpcsswordpresswoocommercecart

Tips for updating the color of the first td element in a table using a specific class

Below is the CSS code for my table: table.show-my-request-table { border: 1px solid black; margin-left:auto; margin-right:auto; border-collapse: collapse; } tr.show-my-request-table-header{ border: 1px solid black; } tr.show-my-requ ...

htmlcssimagehtml-tablecss-selectors

Safari enables seamless text flow into the footer without triggering scrolling as long as the length is manageable

Encountering a unique issue solely in Safari 6.0.5 on OS X 10.8.4 within certain conditions, which doesn't exist when tested on Firefox or Chrome under various scenarios in OS X. The column layout with floats is the crux of the problem. When the text ...

htmlcsssticky-footersafari

I am experiencing difficulties with the PHP login form on MAMP as it is not loading properly, displaying only a

Having trouble with php not loading when I open my browser. Here is my database info: MySQL To manage the MySQL Database, you can use phpMyAdmin. If you need to connect to the MySQL Server from your own scripts, use these connection parameters: Host ...

phphtmlcssmamp

Enhance the v-autocomplete dropdown with a personalized touch by adding a custom

Currently utilizing the v-autocomplete component from Vuetify, and I am interested in incorporating a custom element into its dropdown menu. You can see the specific part I want to add highlighted with a red arrow in this screenshot: This is the current s ...

javascripthtmlvue.jsautocompletevuetify.js