Offspring with percentage-based widths inside a parent element also specified with percentage-based

I have a group of (pseudocode) elements that look like this:

<div id="parent">
    <a><div id="child1 class="children"></a>
    ...
    <a><div id="child-n class="children"></a>
</div>

These elements are styled as follows:

.children{background:url(img/child-n.png)}
.parent{background:url(img/parent.png); width: 100%;}

The goal is to make both the parent and children scale their width according to the window width, while also ensuring all children maintain their relative position within the parent.

htmlcssresponsive-design

Answer №1

Creating a Simple Div Structure with Html

<div id="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
</div>

Styling the divs with Css

body {
    background-color: grey;
}
#parent {
    background-color: pink;
    width: 70%;    
    padding: 10px;
}
.child {
    width: 80%;
    padding: 10px;
    background-color: white;    
    margin: 5px;
}

Check out the demo on jsFiddle!

Answer №2

Your coding needs some adjustments. Make sure to fix the markup errors first, and consider using percentage widths for better results.

<div id="parent">
    <div id="child1" class="children"><a></a></div>
    <div id="child-n" class="children"><a></a></div>
</div>

You can also try putting the divs inside the a tags, depending on your intended design.

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

Move the Div element up and down when clicked

When a tag is clicked, the corresponding div opens and closes. I would like the div to slide down and up slowly instead of appearing immediately. <a href="" class="accordion">Click here</a> <div class="panel" id="AccordionDiv"> ...

javascriptjqueryhtmlcssangularjs

Are there any CSS styles available for targeting an element with any id?

I need to style h2 tags in HTML documents that have an id attribute, without styling the ones without an id. I want to achieve this using only CSS and not by modifying the HTML structure. Specifically, I want to target these h2 elements with a CSS rule: ...

htmlcss

Resizing the window causes divs to be positioned relative to the image (almost functional)

In my coding project, I've encountered a situation where I have 3 "pins" positioned within a div called #outerdiv. This div has a background-image and the pins are supposed to remain in the same spot on the background image no matter how the window is ...

jqueryhtmlcss

The React style background property for CSS styling

Is there a way to apply the css property background inline in react? I attempted to pass the following object without success: let style = { background: `linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ...

cssreactjs

Creating a versatile SASS mixin with the ability to utilize both optional and variable parameters

Is it possible to include both optional and variable elements in a sass mixin? I have attempted the following: @mixin name($className, $centered: false, $dimension...) however, the first dimension value is wrongly assigned to $centered. Switching the ...

csssassmixins

What is the best way to add a list to a JSON array?

I'm interested in learning how to create a loop using for each and for both methods. I want to access the id "list" in order to append li elements. HTML <div id="list"> <ul> <li>Mainland China</li> ...

htmlarraysjsonappend

Having several bootstrap modals on a single webpage

Bootstrap Modals are featured on my landing page. I have numerous bootstrap buttons with various data targets and modals. The content within the modal needs to be displayed based on the button's data target, linked to the modal via its ID. How can I ...

javascripthtmljquerybootstrap-4

Padding issues in navbar-expand for Bootstrap 4

I'm encountering a strange issue with padding in my navbar that seems to be dependent on the navbar-expand property. For instance, when I set it to MD, it appears like this: https://i.sstatic.net/czytc.png As you can see, the logo and menu button d ...

htmlcsstwitter-bootstrapbootstrap-4navbar

In what scenarios would it be appropriate to utilize a checkbox value that is not simply limited to a binary choice of 1 or 0

It has come to my attention that many people on various platforms, including Stack Overflow and my colleagues, use values other than 1 or 0 in their checkboxes (for example, <input type='checkbox' value='check'/>). However, I beli ...

phpjqueryhtmlmysqlcheckbox

The height of the textarea is too excessive

Just a quick question - in my HTML, I have a simple textarea nested within the body tags. Within my JavaScript, I am using jQuery to ensure that the body element is dynamically resized to match the height of the window: $(function() { $("body").heigh ...

jqueryhtmlcsstextarea

The mobile version is experiencing issues with the functionality of the responsive sidebar

Having an issue with the sidebar on this page. In the responsive version, particularly on smartphones, I can't get it to go underneath the content. The sidebar stays connected to the left but doesn't wrap around. Here is the CodePen link. If t ...

cssresponsive-design

Enhancing the efficiency of a JavaScript smooth scrolling feature for numerous listed items

I have been experimenting with recreating the recent Apple Mac retrospective using only CSS and JavaScript to create a small timeline of projects. While I have successfully implemented the layout for the full-screen hero and the expand-on-hover effect, I a ...

javascripthtmlcssperformancescroll

The Chrome browser is failing to detect the hover function of the Surface Pen stylus

Encountering an issue with the hover pseudo-class not functioning properly on Surface pad's Chrome browser. The hover effect is working as expected in other browsers, but not in Chrome. I am using a Surface pen to test the hover functionality. HTML: ...

htmlcss

Tips for implementing X-XSS-Protection: 1; mode=block in HTML

I'm struggling with where to place this piece of code in my existing code. Should it be added to the header section? <head> <meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" /> <title> ...

javascripthtmlsecuritymeta

Trouble with CSS Class Showing Up Only When Hovered

My goal is to make the .panel-text element visible only when a user hovers over the panel. I attempted to use the overlay CSS class, but I encountered issues where the text either wouldn't show at all or would always be displayed. Here is what I have ...

htmlcss

Tips for creating a navigation bar that bypasses body padding in HTML and CSS

I have set padding in my 'body' tag, but I want my top navigation bar to cover the entire page without being affected by it. I attempted to fix this by setting the width to 100% and using negative padding and margin values, but it did not work a ...

htmlcss

Need help displaying a file link from a server using the href attribute in a PHP echo statement?

Having some trouble creating a table with PHP. I managed to create the table, but I'm trying to link a file from an FTP server in a td tag. When I use href, it gives me an error. Can you please help me correct my code? echo "<a href = '../pub ...

phphtml

Having trouble removing data from the database using Laravel 6.0, as the destroy function seems to be ineffective

I'm struggling to remove an event that I previously created. When attempting to use the destroy() function, it seems ineffective. I suspect the issue may lie within the route in the view. <!--Displayed below is the code snippet from the view conta ...

phphtmllaravelpostgresql

Steps to deactivate the select element in backbone.js

Can someone help me with disabling the select option in my MVC template code using backbone.js? I tried using readonly="readonly" and disable="disable", but it sends null as value and doesn't update my address. <div class="login-register" data-val ...

javascriptjqueryhtmlbackbone.js

What is the process for closing the lightbox?

My code is supposed to display a lightbox as soon as the page loads, similar to a popup window. However, there seems to be an issue with closing the lightbox when clicking on the 'x' button at the corner of the box. Unfortunately, the current cod ...

javascripthtmlcsslightbox