CSS - positioning the sidebar on the far left edge of the screen (refer to image)

Is there a way to create a layout similar to this design: https://i.sstatic.net/yjkeD.png

For a demonstration, see here: http://jsfiddle.net/ymC82/

Current HTML code:

<div class="wrapper">

    <aside>
        Sidebar        
    </aside>

    <article>
          Content 
    </article>

</div>

Current CSS code:

*{
    margin: 0;
    padding: 0;
}

.wrapper{
    max-width: 600px;
    margin: 0 auto;
}

aside{
    padding: 50px 0;
    width: 30%;
    float: left;
    display: inline-block;
    background: #aaa;
}

article{
    padding: 50px 0;
    width: 70%;
    float: left;
    display: inline-block;
    background: #777;
}

The red line represents the container. Can anyone assist with this?

htmlcss

Answer №1

Utilizing the CSS3 property box-sizing, you can effortlessly create this type of design.

HTML

<div class="wrapper">

   <aside>
    <p>Insert Content Here</p>    
   </aside>

   <article>
      <p>Insert Content Here</p>
   </article>
</div>

CSS

 *{
margin: 0;
padding: 0;
}

.wrapper{
 margin: 0 auto;
}

aside{
padding:50px 0 50px 10%;
width: 30%;
float:left;
background: #aaa;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}

article{
padding:50px 10% 50px 0;
width: 70%;
float:left;
background: #777;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}

Check out the Fiddle DEMO

Answer №2

Simple and effective fix: utilizing a background div element. http://jsfiddle.net/KrFjf/

div.overlaybg{
    background-color:#bbb;
    min-width:200px;
    width:calc(50% - 100px);
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    z-index:-999;
}

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

Is there a way to extract the code from the "View Page Source" option on a website using BeautifulSoup or a different library?

While perusing the website, we are given the choice to "View source" and "View page source". BS4 allows us to extract data from the "View page source", but is it feasible to extract data from the "View source"? If not, what alternative methods can be use ...

pythonhtmlseleniumbeautifulsouphtml-parsing

Combining Node and React: Using CSS Class Names with Hyphens

Currently, my project utilizes react-starter-kit and includes several react components, each with its own styling file (scss). Every component imports the styling file at the top like this: import s from './Header.scss'; When it comes to using ...

cssnode.jsreactjssassbabeljs

Assistance needed with CSS selectors for implementing with selenium

<div id="footerSearchInputDefault" class="defaultText" style="visibility: hidden;">Search myTwonky</div> In relation to selenium, what do the following terms refer to in the above code snippet? attribute element value text label I often fin ...

cssselenium

Modify content or display picture within accordion panel based on its identifier

In my view, I have a model representing a list of items. Each item has a unique ID, which is included in the H2 header tag. The details of each item are displayed in a div below the header. Initially, there is an image within the header that is set to disp ...

javascriptjqueryhtmlcssjquery-ui

Adjust the state based on the event in ReactJs

I have the following code snippet in a React JS application: const items = [ { value: "A", label: "A" }, { value: "B", label: "B" }, { value: "C", label: "C" }, { value: "D", label: "D" }, { value: " ...

cssreactjs

What is the best way to verify all the UL elements within a hierarchy of checkboxes

Query: In my category listings, some categories have children. I am attempting to implement an "ALL" category that, when selected, will automatically check all sibling checkboxes in the same category. For example, clicking on ALL under the MUSIC category ...

jqueryhtmlcss

Show the div in the right position for both desktop and mobile screens, utilize an accordion or consider shifting the div

My webpage is designed using bootstrap 4 and showcases images of our team members along with accordion functionality to display bios upon clicking the image. On a desktop screen, everything functions smoothly with four images of team members displayed in ...

htmlcssbootstrap-4accordion

Tips on adjusting the height of divs in a simple layout

I'm trying to make two divs fill the page with a ratio of 70% and 30%. However, I don't want to set the size of the "html" or "body" elements. How can I achieve this without affecting the height of the text within the divs? Currently, it only dis ...

htmlcss

Is it possible to adjust positioning using just CSS?

I'm attempting to arrange these elements as shown in the image below: https://i.stack.imgur.com/tWy1I.png https://jsfiddle.net/ut1mgcLb/ HTML <div class="object1"> <div class="snax-voting-container-body"> ...

htmlcss

Submitting numerous data fields using a post AJAX call

I have roughly 143 form fields including text, textarea, and select options that I need to send via an AJAX post request. Is there a way to achieve this efficiently without manually adding each field to the query? Here is how I've set things up: Usi ...

phpjqueryhtmlajaxpost

Show and hide the div by clicking a button

Looking at the image below, my goal is to display the div under the reply button. (The div consists of a text box and send button) https://i.stack.imgur.com/jnaV4.png The code I have currently functions correctly. However, when clicking any reply button ...

phphtmlapibootstrap-4

"Having the same meaning as $(this) in jQuery, the CSS

Is there a CSS equivalent to the Jquery selector $(this)? For example: .widget h4 { background: black } .widget:hover h4 { background: white } In this scenario, when any element with the .widget class is hovered over, the child h4 changes its background ...

cssselectorthis

Tips for designing a flexible structure with 2 columns, each containing an additional 2 columns within

Is it possible to create a 4-column responsive layout? | column left | column right | column left| column right| I would like to achieve a single row layout on larger devices as shown below | column left | column right | column left| column right| an ...

htmlcss

Anomalous Link Behavior on iOS

I am encountering a strange issue with links on the provided website in iOS: When I try to tap on the links under the "Galleries" menu, such as "Benny," nothing happens. It appears that Safari is trying to load the new page, but then it fails to do so. H ...

javascripthtmlioscss

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

javascriptjqueryhtmlcss

Managing the closest element depending on the selected option in Angular 5

My task involves accessing the nearest element of a dropdown. The HTML below includes multiple dropdowns and input boxes. When selecting options from the dropdown, I need to enable or disable the input box closest to it. <div class="form-block" *ngFor= ...

htmlangular

Obtain the href using a combination of xpath and id

I need to extract the href links for 9 search results from this specific website. The xpath and selectors for the first, second, and third items are as follows: '//*[@id="search-results"]/div[4]/div/ctl:cache/div[3]/div[1]/div/div[2]/div[2]/div[2]/p[ ...

pythonhtmlseleniumxpath

Using Jquery to create a slideshow with a div that is set to absolute

<!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); ...

jqueryhtmlcss

The combination of HTML, CSS, and vertical text margins is essential for creating visually

Looking for some guidance on how html text and margins work? If there's a good online reference you can point me to, I'd greatly appreciate it! I'm currently struggling with setting precise margins for text. In the example below, there&apos ...

htmlcsstextmargins

Extract particular details from my database

I need help creating a table to display all chat messages sent to the server. I have the table set up, but now I want to make it so that when I click on a user's name like 'demo', it will show me all the chat messages sent by that specific u ...

phphtmlmysql