What is the best way to create an L-shaped CSS layout without using grid?

I am currently working with react-native and I am trying to create a layout similar to the image provided below. I want the two divs to be equal in size until the right one ends, at which point the left one should take up the entire container. I initially thought I could achieve this using grid, but unfortunately react-native does not support grid. Is there an alternative method I can use to achieve this layout? (please excuse my lack of drawing skills)https://i.sstatic.net/s2ED8.png

Below is the code I am working with. I want the english view to take up the full width once the hebrew view is complete.

<ScrollView>
        <View style={styles.textContainer}>
            <View style={{flex: 1}}>
                <Text>
                    {props.english}
                </Text>
            </View>
            <View style={{flex: 1}}>
                <Text>
                    {props.hebrew}
                </Text>
            </View>
        </View>
    </ScrollView>

Answer №1

One possible solution would be implementing flexbox.

import * as React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{flex: 1}}>
    <View style={{ flexDirection: 'row'}}>
      <View style={{flex:1, backgroundColor: 'red'}}>
      </View>
      <View style={{flex:1, backgroundColor: 'blue'}}>
        <Text>Suspendisse sed consequat mi. Ut commodo felis nec venenatis consectetur. Integer fringilla ipsum at magna iaculis, nec sollicitudin nunc mollis. Fusce eu vehicula nunc. Sed lorem est, viverra quis condimentum vel, volutpat vitae diam. </Text>
      </View>
    </View>
    <View style={{ flexDirection: 'row', flex: 1}}>
      <View style={{flex:1, backgroundColor: 'red'}}>
      </View>
    </View>
    </View>
  );
}

Snack

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

Stop my ::after element from interfering with my select dropdown menu

Check out this JSFiddle I created to showcase my issue: JSFiddle I am currently working on a customized dropdown menu using an icomoon icon instead of a V. While the design looks great, the ::after pseudo-element for the parent container is causing issues ...

Is it possible to have the navigation bar (bootstrap) appear on top of my slider as the default setting, without taking up additional space?

I'm encountering a rather simple issue that's giving me some trouble. I'm currently working on a website design using Bootstrap, and initially, there were no image sliders included by default. After integrating an image slider, I noticed th ...

Superimpose a canvas onto a div element

I'm struggling to overlay a canvas on top of a div with the same dimensions, padding, and margins. Despite using position: absolute and z-index as suggested in similar questions, the canvas keeps appearing underneath the div. Here's my current co ...

Vertical Positioning of Tabs in Materialize CSS

My current challenge involves creating vertical tabs using materialize CSS, specifically in regards to positioning. The desired outcome is for the content to align at the same level when clicking on TAB 3. An example of the expected result can be seen in t ...

Understanding the hierarchy of LESS css class structure is crucial for

In my chat contact list, each contact can have a different state represented by classes: .online .offline .online .selected .offline .selected Here are the corresponding styles (example): .online { background-color: #fff; p { color: #000; } } . ...

Struggling with aligning text in the center of a Navbar using Bootstrap4

I have implemented a Bootstrap navbar and I am facing difficulties in centering the content within it. <nav class="navbar navbar-light bg-light"> <div class="container"> <span class="navbar-brand mb-0 h1" ...

Connecting CSS Style Sheet to JSP Page

I'm facing an issue with linking a CSS file located in my WEB-INF folder to a JSP page. In the JSP page, I have specified the location of the CSS file as follows: <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/WEB- ...

Preventing Background Scrolling While Modal is Open in React - Using 'position: fixed' causes the page to unexpectedly scroll back to the top

Currently working on a React website where users can scroll through various posts on the homepage. Each post includes a '...' menu that, when clicked, opens up a modal with additional options. In order to prevent the background from scrolling w ...

Looking for CSS templates for improving your business web apps?

Many CSS templates out there are fixed-width, typically around 900 pixels wide... Right now, I'm in the process of creating an intranet Rails application and I'm seeking a good resource for CSS templates designed specifically for business applic ...

Guide to setting a background image on a div when hovering using jQuery

I'm having trouble adding a background image to this specific div element: <div class="logo-main"></div> Here is the script I've been using, but it doesn't seem to be working as expected: <script type='text/javascript& ...

Create spinning wheel - canvas

Hey there! I'm trying to create a cool spinning wheel using a canvas and JS. My wheel is supposed to have 10 segments, each saved as a .png file. https://i.sstatic.net/glN1p.jpg In order to achieve a "full circle", I want to draw these 10 segments i ...

Crop and resize a portion of an image using CSS

Is there a way to display just part of an image on a webpage and scale that specific area either larger or smaller using CSS? A common method is by using the following code: $("#myDiv").css({ width: 100, height: 100, background: "url('myurl.jpg ...

Photos on Display are Misaligned

I'm currently in the process of developing a responsive photo gallery based on this tutorial. Within my project, there exists a component known as MemoryList which is defined as shown below: import React from 'react'; import _ from 'lo ...

The grid is experiencing improper sizing in the row orientation

Challenges with Grid Layout In my current project, I am facing a challenge in creating a responsive layout with a dynamic grid within a page structure that includes a header and footer. The main issue arises when the grid items, designed to resemble books ...

Margin in Bootstrap Panel Not Set to 0 as Needed

My bootstrap panel's margins are set to 0, but it doesn't seem to actually be 0. In the image attached, the margin shows as "-", which I assume means 0. However, when I highlight it, I see a large block of orange. Does this indicate that the marg ...

Ways to adjust the div height to match the span height

.headerDesc { width: 100% + 1px; height: 70px; background-color: #4d2765; margin: 0 -8px; } .headerDesc span { padding: 5px; position: absolute; color: white; font-family: 'Arial', sans-serif; text-al ...

The footer is not extending all the way to the bottom when using a flex layout

While working on my website, I attempted to create a sticky footer. To achieve this, I used JavaScript to dynamically generate the <footer> element in order to keep it at the bottom of the page at different screen widths. My goal was to append the f ...

Ways to switch text on and off smoothly using transitions

I have created a webpage where text starts off hidden but has a visible heading. When you click on the heading, the text is revealed below. I am putting the final touches and aiming to make the text slide in smoothly. I am using Javascript for toggling ins ...

Is it common for content to duplicate when using the 'position: fixed' property in CSS media print?

Consider the following div element: ... <div id='section-to-print'>CONT /*Content*/ </div> ... Accompanied by this CSS code snippet: @media print { * { -webkit-transition: none !important; ...

Browser does not support the Media Query

I'm completely puzzled by Media Queries. I've been attempting to resolve this issue but cannot seem to identify where the problem lies. While creating a website with Wordpress, my header.php contains the following line: <meta name="viewpo ...