I am looking to create a layout with 3 columns (which may change, could be up to 4) that are all flexible width and fill the screen.
Does anyone know if this is possible using CSS? Basically, I want three blocks lined up horizontally that take up the entire width of the screen.
It seems like your question is lacking some specifics. However, here's a straightforward solution:
UPDATE: Oops, I forgot to include my positioning details.
HTML
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
CSS
html, body {
height: 100%;
position: relative;
}
.c1 {
height: 100%;
width: 33.3%;
position: absolute;
left: 0;
top: 0;
}
.c2 {
height: 100%;
width: 33.3%;
position: absolute;
left: 33.3%;
top: 0;
}
.c3 {
height: 100%;
width: 33.3%;
position: absolute;
left: 66.6%;
top: 0;
}
Please note that there are multiple approaches to achieve this layout. You can utilize floats, inline-block, and more.
If you're looking for something beyond just CSS, the jQuery Layout plugin could be a good option:
Absolutely, you have the ability to do so.
<style>
.column1 {
float: left;
width: 33%;
height: 100%;
}
.column2 {
float: left;
width: 33%;
height: 100%;
}
.column3 {
float: left;
width: 33%;
height: 100%;
}
</style>
<div class="column1">
Content for Column 1
</div>
<div class="column2">
Content for Column 2
</div>
<div class="column3">
Content for Column 3
</div>
You can set the same height for all columns if desired.
When I access Firefox version 17.0.1 and request document.body.getBoundingClientRect().top; on a simple site with no CSS styling applied, it returns an incorrect value. Instead of the expected 8, which is the default for the browser, it shows 21.4. However ...
I am facing an issue with the burger menu where one of the options should trigger a dropdown, but the content is not adjusting properly. The dropdown menu should push the other content downward, but currently, it overlaps. I have included the code for th ...
My challenge involves placing a close button on the top right corner of a #main div that contains an image of varying or larger size. I need the close button to slightly protrude outside the div using negative margins. The issue is that when I use overflow ...
I am currently working on developing a website form where users can input their information, including their phone number. I am looking for a simple way to verify the user's phone number using PHP without the need for installation of SDKs or complex c ...
Is there a way to change the text color of a variable based on its value in PHP? For example, if the $status is set to admin, can we display it in red when echoed out using <h3>Status: <?php echo $status; ?></h3>? I'm not quite sure ...
Trying to implement the material-UI Autocomplete component in my react app and looking for a way to display a div when hovering over an option from the list, similar to what is shown in this reference image. View example If anyone has any tips or suggest ...
I'm currently trying to create a pure CSS dropdown menu on hover by following this tutorial. However, despite multiple attempts, I'm still stuck and in need of some clear explanations for my issue. <div class="navbar"> ...
Incorporating bootstrap 4, I have implemented a basic set of custom yes/no radio buttons. <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="rd_1" name="rd" class="custom-control-input green" value="Yes"&g ...
This is my initial foray into AngularJS, where I am creating a ticker display comprised of boxes. Check out the CodePen here The Code: index.jade: doctype html html(ng-app="ticker") head script(src="../bower_components/angular/angular.js" ...
Welcome to the website: I've recently taken on a project involving the gradiated menu on this site. The menu works flawlessly in Firefox, Chrome, and Safari - the hover effect changes the background color to a light gradiated green. However, when it ...
After searching for hours, I still can't find a solution to my problem. I am using a simple JQuery script to refresh a div and display my PHP output in it. $script = " <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery ...
When creating a TextView dynamically, I encountered an issue with setting the text as linkable. The desired text value was "Google". After referring to various resources on the internet and blogs, such as this one, I attempted different methods but did not ...
Site Design Challenge I recently discovered that the master/detail design of my website is not very accessible. The main view features a column chart where each column represents a different month. Clicking on one of these columns reveals details in a nes ...
Trying to implement an alert message for logged-in users. A successful login will trigger a success message, while incorrect username or password will display an error. function showMessage(response) { if (response.statusLogged == "Success login") { ...
I am encountering an issue while trying to use FontAwesome icons within my HTML 5 canvas. Here is what I have attempted: ct.fillStyle = "black"; ct.font = "20px Font Awesome"; ct.textAlign = "center"; var h = 'F1E2'; ct.fillText(String.fromCha ...
A query has arisen, regarding a div that contains text and an icon. The issue at hand is that on larger screens the text is not vertically aligned in the center. For further reference, please visit this bootply link: http://www.bootply.com/CHKeRxKOX6 http ...
, I am seeking a solution that goes beyond the repetitive ones provided before. I need to find a more efficient way to achieve my desired outcome based on the code snippet below. In examining the code, it's clear that the first row accommodates 6 ele ...
There are 2 blocks, and the first one has a click handler that assigns the block's scrollWidth to its width property. There is no padding or borders, but when the property is assigned, one word wraps to the next line. The issue seems to be that scrol ...
I'm currently in the process of creating a unique mobile menu for my Wordpress website, but I'm facing some challenges when it comes to displaying and hiding the sub-menu items. I've assigned the class name .menu-item-has-children as my sele ...
After 15 years of working in html development and managing multiple websites, I have come to realize that bold and italic tags essentially serve the same purpose. I can apply CSS styles to both to achieve similar effects. I have even experimented with maki ...