Looking for a layout with specific positioning and fixed widths:
One box on the left, one box on the right, each with a width of 200px. The middle div should adjust to take up the remaining space.
Any suggestions are appreciated. Thank you!
Looking for a layout with specific positioning and fixed widths:
One box on the left, one box on the right, each with a width of 200px. The middle div should adjust to take up the remaining space.
Any suggestions are appreciated. Thank you!
Check out this live example.
Using margin: 0 auto; will help center your element in most cases. Just remember, your element needs a defined width for it to work.
The CSS rule margin: 0 auto; is a shortcut for setting 0 margin on the top and bottom, and automatically calculating left and right margins. This combination aligns the element in the middle of its container.
While margin: 0 auto; may not be perfect for every centering scenario, it is effective in many situations.
Reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any desired width
margin:0 auto;
background:yellow;
}
Check out the DEMO http://jsfiddle.net/yeyene/GYzVS/
$(document).ready(function(){
resizeMid();
$(window).resize(function() {
resizeMid();
});
});
function resizeMid(){
var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
$('#middle').css({'width':mid_width});
}
<div id="main">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
html, body{
margin:0;
padding:0;
}
#main {
float:left;
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
#middle {
float:left;
width:100%;
height:300px;
margin:0;
background:blue;
}
#right {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
If you're looking to experiment with a simple layout using just HTML and CSS, check out this FIDDLE
<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
CSS
div {
height:500px;
position:absolute;
border:0px;
padding:0px;
margin:0px;
}
.c1, .c3 {
width: 200px;
background-color:red;
}
.c1, {
left:0px;
}
.c3 {
right:0px;
}
.c2 {
margin-left:10px;
margin-right:10px;
background-color:blue;
left:200px;
right:200px;
}
.container {
width:99%;
}
[updated]
To ensure proper width adjustment, consider using a table instead of the float style. Float style may not adjust the element's width as needed to fill in the gap.
Here is the HTML code:
<table>
<tr>
<td style="width:10%;"><div id="d1"></div></td>
<td><div id="d2"></div></td>
<td style="width:10%;"><div id="d3"></div></td>
</tr>
</table>
CSS code:
#d1,#d3{
background-color:red;
width:100%;
height:300px;
}
#d2{
background-color:blue;
width:100%;
height:300px;
}
table{
width:100%;
height:100%;
}
Update:
If you prefer not to use tables or complicated JavaScript calculations, you can try this CSS approach:
#d1,#d3{
float:left;
background-color:red;
width:10%;
height:300px;
}
#d2{
float:left;
background-color:blue;
width:80%;
height:300px;
}
I would recommend avoiding the use of JavaScript and instead utilizing CSS to achieve this layout. You can create a #wrapper container and specify the desired width, then use percentages for the left, right, and middle divs.
Here is an example of CSS:
<div id="wrapper">
<div id="left-column"> </div>
<div id="middle-column"> <p>Content will dynamically stretch here</p></div>
<div id="right-column"> </div>
</div>
#wrapper{
float:left;
width:1000px;
*background-color:blue;
}
#left-column, #middle-column, #right-column{
height:500px;
float:left;
}
#left-column, #right-column {
width:20%;
background-color:red;
}
#middle-column {
background-color:green;
width:60%;
}
Sorry for being fashionably late, but I'm finally here!
All you need is some flexbox magic to make this happen.
Code Snippet in HTML:
<div class="flex">
<div class="fixed-div"></div>
<div class="dynamic-div"></div>
<div class="fixed-div"></div>
</div>
CSS Styles:
.flex {
display:flex;
}
.fixed-div {
width:30px;
background-color:blue;
height:200px;
}
.dynamic-div {
width:100%;
background-color:red;
height:200px;
margin: 0px 10px;
}
Feel free to see the code in action here.
Presented here is a list of descriptions associated with specific names. I am seeking guidance on how to group or list the descriptions by name. html: <body ng-app="app" ng-controller="MainCtrl"> <div ng-repeat="nameGroup in loopData"> & ...
When I switch to the router in the navbar, a loop occurs when I try to initiate the download process. I've been struggling with this issue for the past 2 days and can't seem to find a solution. function downloaddosya1() { console.log("Fi ...
There are two users: X and Y, and one page called Page Z. In order to access Page Z, there is a link available. If Page Z is already open in user X's browser, I need the link to be disabled and deny access to user Y. What is the best way to achieve ...
After creating a JavaScript app, I realized the importance of making it SEO friendly. I am curious if anyone has experience setting up a crawlable webpage on Apache using Backbone.js (potentially with assistance from PHP and .htaccess files, or with Phant ...
I've been attempting to scrape a website and encountered an element that reveals information in a bubble when the mouse hovers over it. I am using Selenium for web scraping, but I am unsure how to locate this specific element. After examining the pag ...
I have a stylish horizontal navigation bar with links set up like this: <div class="blackbar"> <span class="blackbar-text"><a href="news.php">NEWS</a></span> <span class="blackbar-text"><a href="foo.php">F ...
My journey with Node JS and express is just beginning as I dive into building a website that serves static files. Through my research, I discovered the potential of using NodeJS with Express for this purpose. While I have successfully served some static HT ...
Any tips on getting the code below to function properly? var x = 'name'; After that, I want to utilize the value inside x like a variable and assign it so that when I call for NAME, I get this outcome: var name = 'NAME'; Can this be ...
I have a table and I want to show the contents of another row inside the current row when the plus icon is clicked. I'm not sure which HTML element to use for this. Please help me figure it out. Thank you in advance. <div class="pro ...
In need of help with replacing tags inside a string using JavaScript. I want to remove the start and end tags, while keeping the content intact. For example, if my input string is: <div class="active"><mark class="active-search-position">The ...
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-property-feed', templateUrl: './property-feed.component.html', styleUrls: ['./property-feed.component.scss'] }) export class Prope ...
@Scripts.Render("~/bundles/script/vue") <script> var vueApp = new Vue({ el: '#holiday-vue', data: { holidays: @Html.Raw(Json.Encode(Model)), tableHeader: 'Local Holidays', holidayWarning: true, dateWarning: true }, methods: ...
I have been working on a Google Maps code that displays both public and private schools with different markers for each category. However, when running the code, I encountered an error specifically on this line of code: var searchBox = new google.maps.pl ...
Looking for a solution similar to the one discussed in this question: CSS - Float to max width In my project, I am working on a layout that involves a <pic> / <info> style setup, with a twist - I want it to be responsive when the user resizes ...
Currently, I have a form field whose value I am passing to a service as this.form.value. However, when I log this.form.value on the console, I see Object { email: "zxzx", password: "zxzxx" }. Despite this, when I send the same data to the service and make ...
My jqGrid is connected to a JSON datasource provided by a WCF web service. The WCF method retrieves a list of ids showing the relationship between a user, branch, and role. For instance, a user can have different roles in different branches. [{"entityHash ...
I have been encountering an issue while attempting to utilize the editor within my Angular 8 application. Despite researching similar errors on Stack Overflow and GitHub discussions, I haven't found a solution yet. Here's how my angular.json asse ...
I am facing an issue with a form inside a modal in my Rails application. When I click on the submit button, nothing happens. How can I use Ajax to submit the modal form and save its content on another page? <button type="button" class="btn btn-primary ...
`: I acquired a code from the internet that allows me to dynamically add and remove input fields and a dropdown list. In my `index.php` file, I select an account name from the dropdown list (`$row["name"]`) and retrieve the corresponding account ID (`$row[ ...
I am looking to implement an HOC (Higher Order Component) for pages within my application that can provide some information stored in local storage, especially when the pages are not being server-side rendered. The challenge I'm encountering is that ...