CSS Floating 2 Column Layout With Multiple Elements - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs CSS floating 2 column layout with multiple elements Ask Question Asked 6 years, 2 months ago Modified 6 years, 2 months ago Viewed 2k times 0

I want to create a simple two-column layout using four divs. I am restricted and cannot modify the HTML structure. I only can modify the CSS.

I want the second div in the right column to fall directly below the previous right column div. Right now, it pushes to the top of the second left div.

Right now this is what I have in HTML:

<div id="parent"> <div class="left"> Left 1 </div> <div class="right"> Right 1 </div> <div class="left"> Left 2 </div> <div class="right"> Right 2 </div> </div>

CSS:

.left { height: 400px; width: 60%; float: left; background-color: red; display: block; } .right { width: 30%; float: right; background-color: green; display: block; }

See my fiddle: http://jsfiddle.net/Lun61g7a/2/

• html
• css
• css-float

Share Improve this question Follow edited Oct 18, 2018 at 13:19 Phil 1966 bronze badges asked Oct 18, 2018 at 12:31 jpsnow72jpsnow72 99533 gold badges1717 silver badges4747 bronze badges 2

• I looked closer and can actually modify the parent's CSS, but i can't create separate divs for each column unfortunately. Ill modify my question to reflect this. – jpsnow72 Commented Oct 18, 2018 at 12:55
• So I am stuck with a single parent encapsulating this all and can really only modify the CSS, not the HTML – jpsnow72 Commented Oct 18, 2018 at 12:57

Add a comment |

1 Answer 1

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 1

Use a flexbox and allow the elements to move to the next "row" when needed

#parent { display: flex; flex-wrap: wrap; } .left { height: 400px; width: 60%; background-color: red; display: block; } .right { width: 30%; background-color: green; display: block; } <div id="parent"> <div class="left"> Left 1 </div> <div class="right"> Right 1 </div> <div class="left"> Left 2 </div> <div class="right"> Right 2 </div> </div>

Share Improve this answer Follow answered Oct 18, 2018 at 13:06 GerardGerard 15.8k55 gold badges3333 silver badges5353 bronze badges 1

• This looks closer, but I actually want the first right div to end at the end of the content and the 2nd right div to begin right below it. It is still pushing the 2nd right div all the way down – jpsnow72 Commented Oct 18, 2018 at 13:23

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css
• css-float

or ask your own question.

• The Overflow Blog
• The real 10x developer makes their whole team better
• The ghost jobs haunting your career search
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Related

2 Different div 2 column layout 1 2 Column CSS Floated Layout 0 Two column of several divs 4 CSS - HTML - 2 float columns 0 simple 2-column layout 1 CSS 2 columns layout with floating from top to bottom 1 Floating div one beside the other - 2 column layout 0 Dynamic 1 or 2 column layout with float 2 2 column layout issue - stacking and floating 0 CSS 2 column layout without floats

Hot Network Questions

• Fibonacci Series Exercise
• PSE Advent Calendar 2024 (Day 24): 'Twas the Meta before Christmas
• How to make machine always turn on after a power outage
• Why are the layers of the James Webb Telescope’s sunshield so thin?
• Character not importing from italic properly
• What's the name of the form of the song "12 Days of Christmas"?
• Name that logic gate!
• How does Electrum ismine() work?
• "Listen to this page" mode in Chrome - Where is it?
• Why kinetically controlled enolate is not formed?
• Find the word pairs
• Movie where a city is being divided by a huge wall
• Why do most philosophers of religion believe in God?
• Notation for Organ Registration in Bach/Árpád Kommt Ihr Töchter
• How to make an iron star visually appealing
• What are the rules on carrying dairy produce in checked luggage when transiting airside in the EU?
• Would the poulterer's be open on Christmas Day for Scrooge to buy their prize turkey?
• Oral tradition after Rav Ashi
• Is it possible to shrink back a GoPro battery?
• When is Parker's first "I'm OK!" signal expected after it's close flyby of the Sun? Which dishes (if any) have been reserved for it?
• What is type of probability is involved when mathematicians say, eg, "The Collatz conjecture is probably true"?
• I fire a mortar vertically upwards, with rifling. When it falls, which direction does it rotate? (Or alternatively: how will it behave?)
• How much influence do the below 3 SCOTUS precedents have for Trump voiding birthright citizenship?
• Which was the first "business jet" equiped with supercritical wing?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html