Currently experimenting with Susy 2 (RC), I'm exploring the process of crafting a basic fluid design with a sidebar of fixed width - positioned either to the left or right. I don't mind utilizing the first and last keywords, but could use some guidance on how to achieve this using Susy 2. Any advice would be greatly appreciated!
Many thanks in advance!
When it comes to incorporating fixed and fluid layouts, there are several methods you can consider based on your specific needs.
Separate the sidebar.
Using float isolation is a clever way to ensure that floats remain independent from one another.
.side {
@include span(3 static isolate);
}
.main {
@include full;
padding-left: span(3 static wide);
}
// or...
.main {
margin-left: span(3 static wide);
}
The span(3 static) will cover 3 columns based on your defined column-width units. By adding isolate, negative right margins are set to prevent taking up horizontal space. Adding wide includes an extra gutter in that width, but you also have the option to use custom widths like 200px.
Remove the sidebar entirely from the layout flow.
If possible, position the sidebar absolutely and add equal padding to the main content. With Susy 2, this approach would resemble:
.side {
position: absolute;
left: 0;
top: 0;
width: span(3 static);
}
.main {
padding-left: span(3 static wide);
}
Utilize a layout-context workaround.
You can create a new layout context to fill the remaining space after a float. A simple method for this is using overflow: hidden;
.side {
@include span(3 static);
}
.main {
overflow: hidden;
}
However, the drawback of this approach arises if you need to allow overflow for any reason. There are other techniques with their own makeshift drawbacks, such as:
.main {
display: table-cell;
vertical-align: top;
width: 10000px;
}
Avoid using Susy for the fixed sidebar layout. Instead, reserve Susy for creating a fluid layout within the main content area (referred to as the "container"). For the overall layout, opt for simple SCSS or even CSS with repeated width values:
$side-bar-width: 250px; // adjust width as needed
.side {
float: left;
width: $side-bar-width;
}
.main {
width: calc(100% - #{$side-bar-width});
}
Following this approach results in a much more straightforward solution.
This design method heavily relies on utilizing the CSS calc() function.
I am facing an issue with the text position inside the box/button element on my website. The text appears correctly in Chrome, but in Firefox, it is positioned above the box, making it difficult to read. Can someone assist me with fixing the CSS or identi ...
Seeking assistance with creating a login screen using React Native, featuring semi-transparent text input. Encountering a peculiar issue where typed text appears highlighted, even though it is not. Please see the screenshot below: (Unable to upload to img ...
How can I ensure that Internet Explorer 11 uses CSS styles from IE9 in my HTML? I have tried the following code: <script runat="server"> private void Page_PreRender(object sender, EventArgs e) { var meta = new HtmlMeta() ...
As a newcomer to the programming world, I am venturing into my first jQuery project for my ICT school assignment. Here is an overview of the project: I have various draggable objects (images) within #wrapper, which is defined in my style.css file. ...
Having some trouble with my Bootstrap 5 mega dropdown. It seems to disappear too quickly when I try to select the contents. I suspect there may be some CSS causing this issue, but I can't seem to pinpoint it. I've already attempted to adjust the ...
I am exploring how to dynamically add the "active" class to a specific section of my menu based on which link within that section has been clicked. After successfully implementing the active class functionality for individual links using jQuery, I am confi ...
Here is my current code snippet: <!-- Masthead--> <header class="masthead"> <div class="container"> <div class="masthead-subheading" style="color: black;">Welcome</div> <div clas ...
I am attempting to wrap the title text around a span object. So far, I have been successful in getting everything aligned correctly, but the final step of wrapping the text seems challenging. My suspicion is that the issue lies in the separation of contain ...
I am in the process of designing a contact page for my website and facing challenges with its responsive design across different screen resolutions. My laptop has a resolution of 1368x766 while my monitor is set at 1920x1080. The absolute positioning of ...
Is there a way to assert the CSS width of an element in NightwatchJS to be 100% without hard-coding the value? Currently, when I attempt to do so, it fails and reports that the width is 196px. The specific error message is as follows: Testing if element ...
I am currently working on displaying data in columns using ngFor. However, I've run into an issue where the styles I apply to the column div are only visible on the top part of the column. As I scroll down to the bottom, the styles disappear. I believ ...
Is there a way to use javascript/jquery to add a border to a selected div? I have multiple rows with columns, and I want only one column per row to be highlighted with a border when clicked. Each row should have one column with a border, so it's clear ...
On my website, I am encountering an issue with the FitText plugin not working properly. The width of a div that I have created using jQuery is causing the problem. Here is the jQuery code: $('.myContent').css({ position: 'relative', fl ...
I have been attempting to add a style tag into the head of an embedded Twitter timeline in order to customize some of the styling. I wrote the CSS and added it within a style tag. My initial idea was to inject this into the iframe using jQuery, but unfortu ...
I am working on an iPad app that includes a jQuery widget with both horizontal and vertical scrolling functionality. I want to disable vertical scrolling via touch events while still allowing users to scroll vertically using buttons (such as a slider). Is ...
Currently, I am working on a page that involves fetching data using ajax and dynamically adding it to an HTML table. Everything is functioning as expected except for one column where I am attempting to style a link as a jQuery button. The CSS class used ...
When working with the following code: <input type="image" ... onLoad="this.style.opacity = 1" /> Everything seemed to be functioning well in IE, but encountered an issue in Chrome where the onLoad event failed to trigger upon image load. It's ...
Trying to display an SVG on mobile and desktop browsers has its challenges. The square shape of the SVG makes centering it vertically and horizontally using 'contain' ineffective, resulting in a centered square image, which is not the desired out ...
Upon initial load of my website, if the page is maximized or in fullscreen mode, the comBrand div will have specific CSS properties applied. However, during a resize event, I use the .css() function to adjust the properties of this element so it doesn&apos ...
While I am aware of the <input type="text" readonly /> possibility, it is not entirely secure. For example, if there is an input field that must remain uneditable by users, making it "readonly" can still be bypassed by inspecting the code and remov ...