Is there a way to structure two divs side by side with a sidebar, where only the left div has a margin to the right and the right div does not require any additional styling?
I am looking for a solution that eliminates the need to manually add style="margin:0" to the right HTML element.
To illustrate this scenario, I have created the following image:
If you want to target every odd item in the order of your items, you can utilize the nth-child(odd) selector.
Without providing a specific code example, I've created a structure that I believe suits such a design.
Check out this example I quickly put together: http://codepen.io/michaelpumo/pen/OMgEKp
In the CodePen demo, Jade is used for HTML and SCSS is utilized for CSS. While I recommend using those languages, if you need the compiled code, it's included below.
HTML
<div class="grid">
<div class="grid__left">
<div class="grid__hero"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
<div class="grid__right">
<div class="grid__sidebar"></div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
body {
padding-top: 10px;
}
.grid {
width: 600px;
overflow: hidden;
margin: 0 auto;
}
.grid__left, .grid__right {
float: left;
}
.grid__left {
width: 400px;
}
.grid__right {
width: 200px;
padding-left: 10px;
}
.grid__hero, .grid__item, .grid__sidebar {
background: #000;
}
.grid__hero {
width: 100%;
height: 200px;
margin: 0 0 10px 0;
}
.grid__hero {
width: 100%;
height: 200px;
margin: 0 0 10px 0;
}
.grid__item {
float: left;
clear: none;
width: 195px;
height: 200px;
margin: 0 10px 10px 0;
}
.grid__item:nth-child(odd) {
margin-right: 0;
}
.grid__sidebar {
width: 100%;
height: 410px;
}
I hope this explanation clarifies things. The crucial element lies within the .grid__item divs, where the right margin is removed for every odd item, creating the desired effect.
If you're looking for a grid system, there are various options available, with Bootstrap being a popular choice. I highly recommend using one of them: http://getbootstrap.com
Personally, I prefer using a SCSS-based grid like Neat:
The code below is supposed to load an image of a 'close window' button that should be clickable. However, when the page loads, the clickable area is only a couple of pixels wide and a pixel or two high, positioned just below or above the center o ...
I'm new to web development and feeling a bit lost at this point. I'm currently focusing on learning HTML, specifically Forms. I want to make sure that the form data is being sent correctly. In my HTML learning book, it suggests using a Node.js ( ...
I'm facing a peculiar problem with placeholders when using the Edge browser. In my current project, I need to implement a textarea with a specific text-indent property. However, on Edge, the placeholder text appears displaced more than expected. To h ...
Looking for a way to collect all selected items from a form and save them in an array, as well as gather the non-selected elements and store them in a separate array. <select multiple id="conditionBad" name="conditionBad"> <option class=" ...
Currently, I am working on a PHP5 dynamic site where content such as galleries and news can be added from the backend. Everything was functioning perfectly fine on my localhost, but when I uploaded it online, the dynamic part stopped working. The default P ...
Hello everyone, I'm facing an issue with a dynamic table where I need to add multiple rows, each containing a different image. I attempted to convert these images to base64 format and save them in a JSON file along with the table data. However, the pr ...
Currently in the process of setting up a project using React JS and I am interested in incorporating auth0 for authentication purposes, along with potentially integrating some serverless functions. auth0 conveniently offers a pre-made "seed" project at ht ...
I have several divs with the same class names where I need to input a value from a dropdown menu into the textarea that belongs to the div where the select element is located. I want this function to work smoothly even with more than 10 divs, which is why ...
Looking for a way to adjust the opacity of a div's background? This is easily done in modern browsers such as Chrome and Firefox using rgba. However, I'm facing difficulties with IE7. The "filter: alpha(opacity=50);" property doesn't work f ...
What is the best way to position a footer if we know its height? For instance, if the height of the footer is 100px: footer { position:absolute; bottom: 100px; background: red; } If this approach is not recommended, could someone assist m ...
I am currently working on a website for a kiosk, where the site transitions like a photoslide between each section. To achieve this effect, I have added a layover/mask on the initial page. The layover/mask is removed using a mouse click function. This is ...
, there is a code snippet that utilizes AngularJS ng-repeat directive to iterate through 'items' and 'md-autofocus' attribute to focus on the last element. The code is contained within an md-dialog with vertical scrolling functionality. ...
I am currently working on a WordPress website that features a dynamic background. While I have successfully implemented movement to the background, the content on the site remains static and unaffected by scrolling. The background does not move alongside t ...
I stumbled upon some jQuery code that can arrange divs either numerically or alphabetically based on their content. To enhance this functionality, I included a feature to hide a div by clicking on it. While sorting the divs and hiding them individually wor ...
I am working on a layout with a fluid width left column and a fixed width right column. My challenge is to add a border that spans the entire height of the tallest column. Below is a simplified version of my current setup: .left { width: 100%; fl ...
I recently started a new project using React, and I have integrated a custom font in my index.css file. I have also included the necessary font files. @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; @import url(assets/font/ir ...
Let's cut to the chase. My table is functioning well, printing all the necessary information without any issues. However, I'm facing a challenge when it comes to grouping the data rows under Program 1 together. Instead of having Program 1 print, ...
I am currently working on retrieving data from my views.py file to my HTML page. Below is the code snippet from my views.py: def VerifiedBySuperuser(request): if request.method == 'POST': vbs = MaanyaIT_EXAM48_ManageQuestionBank() ...
I want the text on my slider to smoothly fade in as it enters the view (my Elementor builder includes a carousel-type slider). To achieve this effect, I included the following code snippet in the header section of my page: <link rel="stylesheet" href ...
Beginner coder here, testing my skills with a self-assigned task. I've created a carousel using Bootstrap 5 with three slides, each containing two lines of captions. As the slides transition, the captions move in opposite directions—up and down. Ho ...