Help with layout

HTML-CSS
1

https://jsfiddle.net/CodearELM/bx5tqod6/8/

Can I achieve the layout in the sandbox without using a padding element? You’ll see what I mean in the link.

2

I don’t see any padding on any of those elements? Perhaps I am missing something? I think you’ll need to be very specific about what you are trying to do.

3

The element with class “right” is the padding. It’s not “real” padding, it’s an element I’m using AS padding.

All I want is everything to look and behave (including the animation) identically as it is but without having to use that “right” element. I’ve tried many different things but I cannot get it to work unless I have that element to the side to keep the proportions right.

4

I’m sure you could probably figure it out if you really tried but I have to ask, why can’t you just use that extra div for the right side? Is there are particular technical reason or are you just morally opposed to it?

5

It’s just my style not to add extra elements if I can help it. I couldn’t find a solution so I asked here. Learning something new is never bad. It’s that simple, really. If there isn’t a CSS only solution, it’s not the end of the world.

6

There are several ways around the issue. Here is one:

<style>
body {
  margin: 0;
  background-color: black;
}

body, .container {
  height: 100vh;
}

.container {
  background-color: green;
  display: flex;
}
.center {
  width: 100%;
  max-width: 400px;
  background-color: lightskyblue;
}

.left_side {
  width: calc(50% - 200px);
  background-color: grey;
}

</style>
<section class="container">
   <div class="left_side">
      left
   </div>
   <div class="center">
      center
   </div>

</section>

alternatively, using flexbox and using the flex shorthand to set flex-shrink, flex-grow, and flex-basis.
or, using normal boxes, set .left_side to position: absolute, give it a responsive width, and set .center to position:relative and give it a responsive left the same size as the width of .left_side
or play around with float

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.