Is there a way to achieve this layout using only CSS and HTML?
I want to create 2 divs, one nested inside the other. The parent div should span 100% of the window width, while the child div should have fixed margins and fluid width filling the remaining space in the parent (parent div - 2 child margins).
While it's straightforward to do this with JavaScript, I'm curious if there's a CSS-only solution.
See example picture
P.S. It needs to be compatible with IE8+
CSS Styles:
<style type="text/css>
.parent {
width: 100%;
overflow: hidden;
background: #ccc;
}
.child {
width: auto;
margin: 30px;
padding: 30px;
background: #eee;
}
body {
margin: 0;
padding: 0;
}
</style>
HTML Structure:
<div class="parent">
<div class="child">Content within Child Container</div>
</div>
HTML
<div class="main_div">
<div class="inner_div">
<div >sfdsd</div>
</div>
</div>
CSS
body {
margin : 0;
padding: 0;
}
.main_div {
width: 100%;
height: 200px;
background: #ccc;
text-align: center;
}
.inner_div {
width: 90%;
margin: 50px auto;
background: #eee;
display: inline-block;
text-align: left;
height: 100px;
}
When working on these types of layouts, I find it more effective to adjust the padding property of the outer div rather than manipulating the margin of the inner div:
#outer {
border: 1px solid #000;
padding: 50px; /* focus here, other styles are just for demonstration */
height: 100px;
}
#inner {
background: red;
height: 100%;
}
For the HTML:
<div id="outer"><div id="inner"></div></div>
View a live demo for reference.
Is this what you're looking for?
See a demonstration here: jsfiddle.net/G5qD3
I am facing a challenge while trying to nest an accordion within another accordion. The issue is that the nested accordion only expands as much as the first accordion, requiring additional space to display its content properly. Any assistance with resolvin ...
Currently, I am in the process of incorporating new Google fonts into various Sass files. These particular fonts are locally stored, and I'm including them using Sass along with URLs with the code snippet below: @font-face font-family: 'A ...
When using the div[class^="test"] selector, keep in mind that it will not select an element with a class attribute like class=" test-something" (This selector was generated on the backend.) Using the div[class^=" test"] is not a valid choice. ...
Learning how to create a responsive website by following a tutorial here Facing an issue: Unable to position elements to the right of the <ul> within the <nav>. Everything seems to fall below or not align properly. Trying to add a login form n ...
I'm experimenting with adding a linear gradient to SVG text, but I'm struggling to specify the fill color in the text class. I came across an example online and decided to try it out, but when I entered the fill color for the text (in the sfp2 cl ...
After spending hours on this problem, I attempted to use "float: right" and successfully moved the button to the right. However, in doing so, the tag is no longer vertically centered. Can someone please assist me with this? Also, if there are multiple sol ...
How can I eliminate the fixed masthead and footer in the Cover bootstrap template? I've tried making edits to the files but haven't noticed any significant changes. http://getbootstrap.com/examples/cover/ ...
I've been working on adjusting the height of the slider on my website for mobile screens, but I can't seem to get it right. The website in question is www.msstoreway.com. Despite adding the CSS code below, I was able to adjust the slider height ...
I recently encountered a problem in my web app where my Glyphicons in Bootstrap suddenly stopped working, appearing as empty squares for no apparent reason. Even after ensuring that the font files were intact and replacing them with fresh ones from versi ...
Below is an HTML table that I have created: <table id="customers" class="table table-bordered" width="100%"> <thead> <tr> <th colspan="2">Activities</th> <th>Mon 17</th> <th>Tue 18</th> </thead> ...
I recently encountered an issue where I was trying to place a png image above my slideshow. Despite trying various solutions, the image always appeared behind or on top without transparency. Based on the erratic display, it seems like the problem might be ...
<ul> <li>test 1</li> <li>test 2</li> <li>test 3</li> <li>test 4</li> <li>test 5</li> <li>test 6</li> </ul> *{ margin:0; padding:0; box-sizing:border-box; ...
I'm working on implementing a flexbox navigation menu with dropdowns for certain items. However, I've encountered an issue where the dropdown lists are appearing to the right of the container on hover, rather than below it as expected for a typic ...
Just starting out with mui, I'm currently working on styling CSS for mui components like so <Typography variant="h5" sx={{ fontWeight: "bold", color: "#1a759f", display: "flex", ...
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <% campground.images.forEach((img,i)=> { %> ...
I am a beginner with bootstrap and I find it extremely useful. I have encountered a problem with a table I am working on. I am trying to set the width of the first column and keep it always visible, but I am having trouble achieving this. I have successful ...
Upon clicking the contact tab, the gmaps loads but unfortunately only shows the left corner of the map. Quite intriguing... Any thoughts on how to fix this? Here is the corresponding jsfiddle This is the structure of my HTML code: <div id="menu-contai ...
The SCSS code snippet below is causing me some confusion: li { &.menu-item-type-custom { margin-bottom: 10px; a { // } &:last-of-type { margin-bottom: 40px; } &:first-of-type { margin-top: 40px; ...
How do I customize my carousel to display unique titles or captions for each slide? Here is the code snippet provided: <h1>Incredibly Basic Slider</h1> <div id="slider"> <a href="#" class="control_next">>></a> < ...
Hi there, I've been struggling with this CSS code in a scss file: @font-face { font-family: 'tr-icon'; src:url('../fonts/tr-icon.eot?88d087'); src:url('../fonts/tr-icon.eot?#iefix88d087') format('embedde ...