I am creating apps within this interface which includes divs that can be resized. I have this one (customers) set to open at the size of the contents via setting a default height and width. The tables on the right pull lots of information from a query. It is somewhat annoying to scroll side to side in the little menu. The left side is fine and the text inputs can stay the same. What I want is for the left side to stay the same (always) and for the left side of the right side to always be flush.
Basically, I want the right div elements (within the container div, marked by red in image below) to expand right to fill the box dynamically. I've tried and found some janky methods which make getting everything to stay proper a little funky.
So, community, what is the best way to keep the left side of this div lined up with the fixed left half, while making the right side adjustable to fill only to the right?
Here is a link to the image
I figured it out. The trick was to set 2 larger divs to display:table-cell and set the left one to a fixed width. The right one stays aligned and fills the container. Then you can make divs inside the table cell divs that stay properly sized.
#thisland {
display: table;
width: 100%;
height:100%;
min-height:800px;
min-width: 800px;
position: absolute;
}
#westsyde, #eastsyde {
display: table-cell;
}
#westsyde {
border:1px solid black;
width: 350px;
position: relative;
height:100%;
}
#eastsyde {
border:1px solid white;
position: relative;
height:100%;
}
HTML would be like this, so #eastsyde fills to the right side of #thisland
<div id="thisland>
<div id="westsyde"></div>
<div id="eastsyde"></div>
</div>
Related
I want to create a simple side-navigation that takes up the entire screen's height. I am using Milligram for my base, and I want my side-nav to work with it. I have the following set up:
Codepen demo
As you can see, my sidebar is the following element
<div class="sidebar"></div> with the following styles:
div.sidebar {
position: absolute;
width: 250px;
height: 100%;
z-index: 99;
background-color: black;
}
This sort of works, the sidebar appears above all else, but everything else does not get pushed to the side. And if the screen is small, the content clashes with the sidebar.
How can I make it so the sidebar pushes everything else (including the navbar) to the right by 250px(its width)? I know this will make things unusable on smaller screens, but I will give the user a way to toggle it.
Any help is appreciated.
You can set the left margin on your equal to the width of your sidebar.
section .container {
margin-left: 250px;
}
I have a wrapper div with some content in it. Here is its css:
.wrapper{
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto;
padding: 0.3%;
}
Now, within this div, I have another div, which I will call div2. It has no relevant styles to it, aside from cosmetic ones (background, font-color, etc.). Its behaviour is to simply take up the entire width of the wrapper div, no matter what the browser's width, zoom, or screen size is. This is as expected, and nothing is wrong here. I'm trying to make an addition onto this, and that is where I'm having trouble.
I have an image that I want to display, such that the bottom of the image is in line and touching the top of div2, and on the right side end of div2, so that the right end of the image is also in line with the right end of div2.
This would sound simple enough to do, but I don't want this image to mess with the vertical space. Adding the image in will of course introduce a larger gap between div2, and any element above it, which means I have to use position:absolute to take the image out of the regular flow of the page. However, my attempts at keeping the image at this same position, in line as described, have been unsuccessful. How can I keep this image aligned at all times, and under all possible user display circumstances, without having this large gap?
I've tried using the offset CSS top and left to move the image, but it doesn't work for all screens/zooms/resolutions/browser widths, and this isn't something I can practically use media queries for.
I'm not quite sure if I got you right, but I guess you need to:
#div2
{
position: relative;
width: 100%;
overflow: visible;
}
#div2 img
{
position: absolute;
bottom: 100%;
right: 0;
}
EDIT: Place your image inside of #div2.
So, your image, will always be on the right top of #div2. That's what you wanted to do?
My problem is with the header. So I basically have 3 columns of divs. I want the middle one to have a constant width of 980px, and then I want the left of the header to extend to the end of the browser window with a blue background color. As for the right of the header, I want that to extend to the end of right side of the browser with a black background color. It kind off looks like this:
<------------------------------[blue][center header][black]---------------------------->
I've done my research and all I could find so far are two columns with a fixed left column with the right column filling up the rest of the space. I wonder how this can be applied to my problem?
Would it be like:
<div style="width:100%;">
<div style="display:table-cell; background-color:blue;"></div>
<div style="width: 980px;">my header</div>
<div style="display:table-cell; background-color:black;"></div>
</div>
Thank you!
A simple solution - basicaly using your exact stying, but putting another block in the central table-cell element, something like this span here:
<div class="wrapper">
<div class="left"></div>
<div class="center"><span>my header</span></div>
<div class="right"></div>
</div>
I moved all the inline style to a separate CSS block and used class selectors:
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center span {
display:inline-block;
width:900px;
}
here is a jsfiddle
and here I made the center much narrower for a better illustration: jsfiddle
Hope this helps =)
Unfortunately there isn't a super smooth way of doing this that is also has wide cross compatibility support. There is a CSS spec for display called flex or flexbox which would do what you want beautifully and elegantly, but it has very limited support at the moment. Here is some resources on flexbox for your perusal...
http://css-tricks.com/old-flexbox-and-new-flexbox/
In the meantime, you can achieve the layout you want with some basic CSS jiggery-pokery that will get you what you want, but it requires absolute positioning your middle div.
Heres the JSFiddle: http://jsfiddle.net/CW5dW/
Here's the CSS:
.left {
width: 50%;
height: 300px;
float: left;
padding-right: 160px;
box-sizing: border-box;
background: red;
}
.right {
width: 50%;
height: 300px;
float: right;
padding-left: 160px;
box-sizing: border-box;
background: blue;
}
.middle {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
padding: 10px;
margin-left: -150px;
box-sizing: border-box;
background: orange;
}
What is going on here you might ask?
Basically, we are taking the div with class middle and removing it from the flow of the document. This allows us to float our left div left, and our right div right, with widths of 50% in order to fluidly take up ALL space of the browser.
We then tell the middle div to take up 300px of space (in your case 980), and we tell it to go 50% of the total width of your browser from the left. This doesn't center it though, because its calculated from the left edge of your div. So we give it a negative margin space of half it's width, to sort of "move" that left edge to the center of the div.
Then, since we know the middle div has a width of 300px (in your case 980), we can then say that the left div should have some padding on its right edge greater than or equal to half the middle divs width, in my example that's 150px, and I added 10px more so text couldn't come right to the edge of the div, so 160px total. We do the same for the right div but for it's left side. This limits the content of those two divs from falling underneath our middle div.
This answer is not an "answer" as such - it's an extended comment to #Michael's post. I have, however, posted another answer - a jQuery solution.
Regarding #Michael's answer (which is a very tidy solution indeed) there is a tiny issue that if you remove your height declaration (which the OP undoubtedly will) then the backgrounds for the various columns become exposed - this method relies on the backgrounds all levelling out at their bottom edge in order to make the design coherent. If the OP's design doesn't have backgrounds behind the columns then this solution should be fine. If backgrounds are required (which they might be judging by the question wording) then it could be awkward. Two solutions to this...
a simple javascript that scans the page for column length, finds the longest, and matches all shorter ones to the maximum.
The other (and probably better) solution is to drop a background into your with the columns already on it (it only needs to be 1px high I guess) - just make sure the central white band is 980px wide and the side columns extend off a thousand or so pixels to accommodate even the largest of browsers
OK, here's my solution. This will present a "common or garden" three column fixed width layout to all users and then adjust it for users with javascript enabled (which, let's face it, is the vast majority of users). The benefits of this solution are that the layout will behave like any ordinary 3 solumn layout without the quirks you can experience from using more advanced CSS tweaks like absolute positioning and fixed heights.
Fiddle here... http://jsfiddle.net/vuary/
You should be able to see what's going on with the HTML and CSS... it's basic stuff. The jQuery is pretty straight forward too:
$(document).ready(function(){
// find the width of the browser window....
var docuWidth = $(window).width();
// find the width of the central column as set by the CSS...
// (you could hard code this as 980px if desired)
var centerWidth = $('#center').width();
// figure out how many pixels wide each side column should be...
sideColWidth = (docuWidth-centerWidth) / 2;
// then set the width of the side columns...
$('#left,#right').css({
width:sideColWidth+'px'
});
})
EDIT
Converted the jQuery to a function that is called when the document is ready, and again if the viewport is resized... just in case:
http://jsfiddle.net/aKeqf/
So I have a div that stick at the top right hand corner of my screen.
I can make the div stay at the top right hand corner using the following CSS:
.dockbar {
background: #000000;
width:300px;
float:right;
position: absolute;
left:1180px;
top:10px;
height:38px;
}
But I hate this approach because the div has space to the right if the screen is larger. I would prefer to using percentage based sizing, but doing that causes the div to move with the screen (because of the percentage..)
Is there a way to position a div at the top right hand corner:
Without using fixed positioning
Without declaring exact pixel based positioning
Thanks
Change left:1180px; to right: 0px and everything should work fine.
#wrapper{
width: 800px;
}
<div id="wrpper">
<div class="dockbar"></div>
</div>
Something like this, maybe.
I have managed to put two divs side by side using a <div class="clear"></div> as explained elsewhere.
I now want to put two divs side by side, inside a fixed-size box that can scroll horizontally. Vertical space isn't a problem, but the two divs must be side by side and can expand vertically when needed. If space is needed horizontally, they must expand inside the box with fixed width but whose insides can scroll horizontally.
The following code does this with tables, but I was wondering if it can be done with divs as well, to keep the page semantically correct. The div version fails, because it keeps the second pane under the first one, even with a <div class="clear">.
Cheers for any advice!
PS: I can't seem to insert a block of html code in here, so I saved the file here: http://husnoo.com/scroll1.html (tested with chrome and safari, open the source code to see what I mean).
give the right box float:right;and it will stick to the right side :)
http://jsfiddle.net/loktar/Mbs3q/1/
div#wider {
background-color: #ddd;
width: 700px;
float:left;
}
.second_pane{
background-color: #eee;
width: 300px;
float: left;
}
Is that what your looking for? Floats them both to the left so they stick to each other, and are inline.