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

Retrieving radio button value in Angular 2

Currently, I am attempting to retrieve the radio button value in an Angular 2 project. The radio buttons are defined in index.html as: <input type="radio" id="options1" name="function" value="create"> <input type="radio" id="options2" name="func ...

javascripthtmltemplatesangular

Maximizing the potential of Angular forms through native FormData

Currently, I am revisiting an older project that still uses traditional methods for form submission. The HTML includes a form element with defined method and action. My goal is to submit the form in the old-fashioned way using the action attribute to post ...

javascripthtmlangularforms

When the window is resized, the text and images become jumbled and distorted

As a beginner in CSS, I am encountering an issue where the text and images on my website get distorted when I resize the window. How can I resolve this? HTML <img src="images\titles_03.jpg" class="tt1" > <img src="images\titles_05.jpg ...

htmlcss

Execute HTML and JS files through Eclipse PDT to view in a web browser

Is it possible to open HTML and JS files in a web browser within Eclipse PDT? Right now, only PHP files seem to launch successfully, otherwise an "Unable to Launch" dialog pops up. Any advice is appreciated! ...

javascripthtmleclipse-pdtlaunch

Using a single AJAX function to write on various tags

Information regarding the likes and dislikes count is retrieved from the server using an ajax function with the following queries: $q3="select count(value) as a from rank where personID='$person' and itemID='$itemID' and value>0 ...

phphtmlajax

Turn off the ability to click on images, but allow users to access the right

https://i.stack.imgur.com/jriaP.png Example image sourced from reddit.com Illustration represents the desired effect using CSS and possibly JS. In essence: I aim to make an image on a website unclickable to its imageURL There should be a context menu ...

javascriptjqueryhtmlcssimage

Convert the div into a string, including only the visible elements

Within the div #allContent, there are multiple nested divs. My goal is to extract the entire content of #allContent as a string, while excluding any invisible divs contained within it. I believe that this task can be achieved using a combination of filter ...

jqueryhtml

Setting the size of a box using CSS in HTML pages

I am facing issues with resizing boxes. Below is the code snippet: <!DOCTYPE html> <html lang="en"> <head> <style> .wrapper { text-align: center; } #bubble { display: inline; -moz ...

htmlcss

Valid ways to ensure that a CSS image expands outside the boundaries of the containing div

I have inserted an image using the following CSS code: .imgtemp { float:right; top:0px; left:0px; overflow:visible; width:100%; } Although I have added the div tag to display it on the page, ...

htmlcss

Guide to implementing tooltips for disabled <li> elements in AngularJS

I have a list of items that are displayed using the following code: <li class="dropdown-item" data-toggle="tooltip" uib-tooltip="tooltip goes here" data-placement="left" data-ng-repeat="result in items.results.contextValues.rows " ...

javascripthtmlcssangularjstwitter-bootstrap

Hiding an element with display: none will prevent the hover effect from

I have integrated a CSS dropdown menu from this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button Additionally, I am utilizing jQuery .on("click", event with an AJAX call. Following the successful AJAX call, I am using the foll ...

jquerycssdisplay

I am having trouble grasping the concept of CSS and the first-child selector

I am having an issue with the first-child selector in CSS. I have two divs with the same class, each containing an image and a paragraph element. When I use the .div-class:first-child {margin:10} rule, the margin is only applied to the paragraph in the fir ...

htmlcss

Guide to changing the checkbox value using JavaScript

Describing the Parent Element: <span style="background: yellow; padding: 50px;" onClick="setCheckBox()"> <span> </span> <input type="checkbox" name="f01" value="100"> </span> ...

javascripthtmloracle-apex

Linking all styles with Angular 2

Is it possible to apply a style when the exact nature of that style is unknown? Consider a scenario where I have a model containing string variables defining styles, as shown below: myStyle1:string="margin-left:10px"; myStyle2:string="margin ...

cssangularbindingstyles

What is the best way to stop the content in :after from wrapping onto the following line?

How can I add a divider "/" after each li element in my Bootstrap-based menu without it wrapping to the next line? The code I am using can be found here: http://jsfiddle.net/zBxAB/1/ I have tried using inline-block to prevent the slash from wrapping, but ...

htmlcsstwitter-bootstrap

Python web scraping: Extracting data from HTML tag names

Seeking help with extracting user data from a website by retrieving User IDs directly from tag names. I am utilizing python selenium and beautiful soup to extract the UID specifically from the div tag. For instance: <"div id="UID_**60CE07D6DF5C02A987E ...

javascriptpythonhtmlseleniumbeautifulsoup

What factors does YouTube take into consideration when determining the dimensions for the generated iframe code?

Currently, I am working on a feature that allows our users to embed videos on their websites using iframe code. I want this feature to function similar to how YouTube handles it. However, I'm facing an issue where the iframe size generated by YouTube ...

htmliframe

Unspecified origins of Js in Chrome Extension

console.log(chrome.runtime.sendMessage({from:"script2",message:"hello!"})); However, attempting to send the message from a background script to a content script is proving to be unsuccessful. https://i.stack.imgur.com/ERgJB.png ...

javascripthtmljquerygoogle-chrome

CSS - Overlapping elements on smaller screens due to being stacked

I am encountering an issue with a column of elements stacked below each other in my code. Here is a simplified version of my implementation: <div style="position: relative; height: 100%;"> <div style="position: absolute;">Really long text h ...

htmlcsstextoverflow

Issues with ng-click functionality not activating on <li> HTML elements

I've been attempting to add ng-click functionality to my list, but it's not working as expected. I've tried adding the ng-repeat directive and also without it on li elements. Here is the snippet of HTML code: <ul class="nav nav-tabs"&g ...

javascripthtmlangularjs