Suggestions on designing a website's layout

Question

Suggestions on designing a website's layout

Currently, I am in the process of designing a website that is tailored to perfectly fit within the browser window. Here's a brief overview of the layout:

At this point, the Red area is set as display:block, while the Green area has been configured with display:block and margin-right:200px. The Blue areas, nested within a div, are floated to the right.

The width has been successfully adjusted, but now I am seeking guidance regarding the height. Both the Red and Dark Blue areas have fixed heights, yet I need the Green and Light Blue areas to adapt their heights according to the browser window view.

I have attempted to utilize box-sizing, however, it seems to surpass the height of the window view by extending all the way to maximum height of the window. My explanation might be a bit confusing, so any advice or suggestions would be greatly appreciated. Thank you!

html css layout

Answer 1

Answer №1

If you want a green box to have a height of calc(100%-{height of red box});, and for the light blue box to have a height of

calc(100%-{height of dark blue box}-{height of red box});

Answer 2

If you want a green box to have a height of calc(100%-{height of red box});, and for the light blue box to have a height of

calc(100%-{height of dark blue box}-{height of red box});

Answer 3

Answer №2

This is like the earlier version of C-Link's response.

Link to jsFiddle and View in fullscreen mode

One limitation is that any content extending beyond one full page will be outside its container (visible when scrolling down in the fiddle, not on fullscreen).

Ensure our page expands to its complete height.

body, html { height: 100%; width: 100%; margin: 0; padding: 0;}

Establish a fixed-height header.

header {
    height: 101px;
    background: red;
}

Create a box for everything below the header. Previously mentioned box-sizing technique was going in the right direction. We can also add padding equal to the header's height. Then percentages inside it will function well.

.content{
    position: absolute;
    box-sizing: border-box;
    padding-top: 111px;
    padding-bottom: 10px;
    top: 0; left: 0;
    height: 100%; width: 100%;
}

Float our aside element (could vary based on content) and apply some styles to it.

aside {
    float: right;
    width: 20%;
    height: 100%;
    padding-bottom: 111px;
    box-sizing: border-box;
}

.top {
    height: 100px;
    background: blue;
}

.bottom {
    margin-top: 10px;
    height: 100%;
    background: skyblue;
}

This area contains the main content, floated to the left. Width could be specifically defined if precise padding is desired with additional HTML markup.

[role="main"] {
    width: 78%;
    background: limegreen;
    height: 100%;
    float: left;
    box-sizing: border-box;
}

You may add overflow-y: auto to either the main or aside elements for them to scroll when content exceeds the space. Mobile styles should eliminate floating, absolute positioning, styling, and widths nearly 100% for this page.

Answer 4

This is like the earlier version of C-Link's response.

Link to jsFiddle and View in fullscreen mode

One limitation is that any content extending beyond one full page will be outside its container (visible when scrolling down in the fiddle, not on fullscreen).

Ensure our page expands to its complete height.

body, html { height: 100%; width: 100%; margin: 0; padding: 0;}

Establish a fixed-height header.

header {
    height: 101px;
    background: red;
}

Create a box for everything below the header. Previously mentioned box-sizing technique was going in the right direction. We can also add padding equal to the header's height. Then percentages inside it will function well.

.content{
    position: absolute;
    box-sizing: border-box;
    padding-top: 111px;
    padding-bottom: 10px;
    top: 0; left: 0;
    height: 100%; width: 100%;
}

Float our aside element (could vary based on content) and apply some styles to it.

aside {
    float: right;
    width: 20%;
    height: 100%;
    padding-bottom: 111px;
    box-sizing: border-box;
}

.top {
    height: 100px;
    background: blue;
}

.bottom {
    margin-top: 10px;
    height: 100%;
    background: skyblue;
}

This area contains the main content, floated to the left. Width could be specifically defined if precise padding is desired with additional HTML markup.

[role="main"] {
    width: 78%;
    background: limegreen;
    height: 100%;
    float: left;
    box-sizing: border-box;
}

You may add overflow-y: auto to either the main or aside elements for them to scroll when content exceeds the space. Mobile styles should eliminate floating, absolute positioning, styling, and widths nearly 100% for this page.

Answer 5

Answer №3

One way to adjust the height of the green box is to set it equal to the window height minus the height of the red box.

Similarly, you can set the light box height to the window height minus the combined height of the red box and the dark blue box.

Edit 1: It's important to note that this adjustment needs to be made using JavaScript.

Edit 2: Don't forget to take into account any paddings and margins as well.

Answer 6

One way to adjust the height of the green box is to set it equal to the window height minus the height of the red box.

Similarly, you can set the light box height to the window height minus the combined height of the red box and the dark blue box.

Edit 1: It's important to note that this adjustment needs to be made using JavaScript.

Edit 2: Don't forget to take into account any paddings and margins as well.

Answer 7

Answer №4

Is it possible to simply specify a maximum or minimum height for the divs based on their intended use?

Personally, I prefer to utilize a main container or wrapper div to encapsulate all other elements within, essentially defining my effective page or screen area.

<div id="wrapper">
    <div id="content">
        <div id="sidebar">
        </div>
    </div>
 </div>

#wrapper{
    min-height: Specify desired value here;
    max-height: Specify desired value here;
}

Consider structuring your page with primary container divs not only for content but also for header and footer sections.

For example, I typically have a main wrapper representing the entire page, within which are nested the header, content, nav, and footer divs as the key components. All additional elements can then be enclosed within these.

You can create a layout using percentages for fluid design that adapts to varying browser sizes. Remaining elements will fit neatly inside the main divs and remain bound by them. Additional consideration may be required for positioning, but this is generally the recommended approach.

<div id="wrapper">
<div id="header">Include header content and related divs here</div>
<div id="content">Enter all content here</div>
<div id="nav">This represents your sidebar</div>
<div id="footer">Footer, similar to header</div>
</div>

Then adjust the CSS to customize the aforementioned layout focusing on the main divs exclusively. Use percentages instead of pixels for fluidity maintenance.

#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}

Answer 8

Is it possible to simply specify a maximum or minimum height for the divs based on their intended use?

Personally, I prefer to utilize a main container or wrapper div to encapsulate all other elements within, essentially defining my effective page or screen area.

<div id="wrapper">
    <div id="content">
        <div id="sidebar">
        </div>
    </div>
 </div>

#wrapper{
    min-height: Specify desired value here;
    max-height: Specify desired value here;
}

Consider structuring your page with primary container divs not only for content but also for header and footer sections.

For example, I typically have a main wrapper representing the entire page, within which are nested the header, content, nav, and footer divs as the key components. All additional elements can then be enclosed within these.

You can create a layout using percentages for fluid design that adapts to varying browser sizes. Remaining elements will fit neatly inside the main divs and remain bound by them. Additional consideration may be required for positioning, but this is generally the recommended approach.

<div id="wrapper">
<div id="header">Include header content and related divs here</div>
<div id="content">Enter all content here</div>
<div id="nav">This represents your sidebar</div>
<div id="footer">Footer, similar to header</div>
</div>

Then adjust the CSS to customize the aforementioned layout focusing on the main divs exclusively. Use percentages instead of pixels for fluidity maintenance.

#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}

Answer 9

Answer №5

One clever technique involves setting the green (and light blue) box with absolute positioning, a padding, and a negative margin. Since 100% width is relative to the containing box (whether it's a parent div or the window itself), this approach works well. If the header had a fixed height, like 10%, it would have been simpler. The padding ensures that content doesn't get hidden by the header, while the negative margin repositions the box. Remember to set the z-index too, to prevent the content (green part) from overlapping the header.

The CSS code would be:

.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }

You can see how it works in this fiddle: http://jsfiddle.net/2L7VU/

Answer 10

One clever technique involves setting the green (and light blue) box with absolute positioning, a padding, and a negative margin. Since 100% width is relative to the containing box (whether it's a parent div or the window itself), this approach works well. If the header had a fixed height, like 10%, it would have been simpler. The padding ensures that content doesn't get hidden by the header, while the negative margin repositions the box. Remember to set the z-index too, to prevent the content (green part) from overlapping the header.

The CSS code would be:

.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }

You can see how it works in this fiddle: http://jsfiddle.net/2L7VU/

Suggestions on designing a website's layout

Answer №1

Answer №2

Link to jsFiddle and View in fullscreen mode

Answer №3

Answer №4

Answer №5

Similar questions

Alter the background color of a table cell in Angular HTML depending on a boolean value

Tips for expanding the boundary of a Font Awesome icon

"Creating a 2-column layout for an unordered list using CSS Flex

My goal is to generate four HTML buttons that trigger specific functions: addition, subtraction, multiplication, and division

Presenting tailored information within a structured chart

Creating code to ensure a div element is displayed only after a specific duration has elapsed

What is the reason that `font-size` does not match the `height`? For example, if the `<span>` on the left is 2rem, on the right I could fit 2 smaller `<span>`s, each with a size of 1rem

Trick for adjusting padding on top and bottom for responsive blocks of varying widths

Storing a selected value in the database using Laravel Blade

Notify the user with a Jqgrid alert when they attempt to select multiple checkboxes

Tips for saving data from dynamically created input and select boxes

Horizontal image scrolling problem across different browsers

What is the process for building an interactive quiz using JavaScript?

Fixed position scrollable tabs with Material UI

When hovering over the menu list, the background-color of the text area remains the same

Display picture on webpage in 10 seconds

Verify whether the element within an iFrame contains any content

Switch off any other currently open divs

Unable to open fancybox from a skel-layer menu

The animation function in A-frame causes entities to vanish when used with D3.js