How to Set Custom Width for Specific Sections in Streamlit App

[Julian1]

Hi,

I’m trying to make only certain sections of my Streamlit app display wider without setting the entire app to layout="wide". I’d like to maintain the standard layout for most of the app but have specific sections or containers (like st.columns() or st.container()) expand to 80-95% of the total allowable viewport width.

Here’s what I’ve tried so far:

• Using custom CSS to set width and max-width on st.container() or specific div elements.
• Targeting Streamlit’s internal data-testid attributes like stVerticalBlock and stHorizontalBlock to apply custom width styles.
• Wrapping the sections in custom HTML div containers with inline CSS to control the width.

Unfortunately, none of these approaches have provided a reliable solution. The CSS styles are either overridden by Streamlit’s default settings, or they apply inconsistently. Ideally, I’d like to be able to:

1. Set a custom width (e.g., 80-90%) for certain st.container() or st.columns() blocks.
2. Maintain the standard width for other sections of the app.

Has anyone successfully managed to make only part of a Streamlit app wider? Any tips, workarounds, or examples would be greatly appreciated!

Example Code of What I’ve Tried:

import streamlit as st

# Attempt to make only a certain section wider using custom CSS
st.markdown("""
    <style>
    .custom-container {
        width: 90% !important;
        max-width: 1200px !important;
        margin: auto;
        padding: 20px;
        border: 2px solid blue; /* For testing */
    }
    </style>
    <div class="custom-container">
""", unsafe_allow_html=True)

# Content within the custom wider container
st.subheader("Custom Wider Section")
col1, col2, col3 = st.columns(3)
with col1:
    st.write("Left Column")
with col2:
    st.write("Center Column")
with col3:
    st.write("Right Column")

# Close the custom container
st.markdown("</div>", unsafe_allow_html=True)

# Regular Streamlit width for other content
st.subheader("Back to Normal Width")
st.write("This part should remain at the default width.")

[blackary]

The easier solution, which may not be ideal, is to default to a wider mode, and add an easy way to make some things normal width, like this:

import streamlit as st

st.set_page_config(layout="wide")

def st_normal():
    _, col, _ = st.columns([1, 2, 1])
    return col

st_normal().image("https://http.cat/images/100.jpg", use_container_width=True)

# This will be wider
st.image("https://http.cat/images/100.jpg", use_container_width=True)

with st_normal():
    st.subheader("Back to Normal Width")
    st.write("This part should remain at the default width.")

If you do want to add custom styling to a particular section, you can now do st.container(key="foo") and use the css target .st-key-foo to target it, if you’re using streamlit >= 1.39. But, I think the use-container-for-normal-width solution is probably easier than using css to make sure everything works properly.

[Julian1]

Thank you! It works great! I like how you inverted the problem - very cool solution. I really appreciate the time and help.