Css div responsive design

0 votes

I have 2 divs inside one container div:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

This is how it should work:

The right div should simply reduce in width if the window's width is reduced, whereas the left div should be responsive and have a minimum and maximum width. Stay to the right of the left div (within its min and max width)! The right div should be below the left div till the container div's width is less than the sum of the widths of the left and right divs!

According to the existing CSS, the green div should decrease in width by 200–500 pixels while still being to the right of the left div. The green div should only drop below the blue div if the container div's width decreases by more than 400 pixels (the combined width of the two divs).

Thank you!

Aug 5 in CSS by Edureka
• 9,940 points
8 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

How to create material design input form using css and bootstrap?

Try with this code. HTML: <div class="main_div"> ...READ MORE

answered Jun 21 in CSS by Edureka
• 9,540 points
105 views
0 votes
0 answers

How can I vertically center a div element for all browsers using CSS?

I want to center a div vertically with CSS. ...READ MORE

Jun 22 in CSS by Edureka
• 9,940 points
19 views
0 votes
1 answer

How to make div background color transparent in CSS

To begin, we will build a div> ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
77 views
0 votes
0 answers

Using Flex CSS and Bootstrap for a responsive layout

I've been playing with fully responsive layouts ...READ MORE

Jun 30 in CSS by Edureka
• 9,940 points
11 views
0 votes
0 answers

Responsive css background images

I have a website (g-floors. EU) and ...READ MORE

Jul 8 in CSS by Edureka
• 9,940 points
10 views
0 votes
0 answers

How do I import Ant Design React UI library and css?

I am very new to UI libraries ...READ MORE

Jul 22 in CSS by Edureka
• 9,940 points
19 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
4,736 views
0 votes
1 answer

Using/Handling colon inside a JSF generated HTML element ID in CSS selector

Yes, you can.  Just Backslash (\) the colon.  Like ...READ MORE

answered Nov 14, 2018 in Others by DataKing99
• 8,240 points
1,701 views
0 votes
1 answer

What is a css selector and where is it used?

CSS Selector is a combination of element ...READ MORE

answered Nov 21, 2018 in Data Analytics by Kalgi
• 52,350 points
280 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP