All throughout a page I'm working on I continue to get a repetitive layout error that stems from an attempt to float elements left and right in congruence with one another. However, on re-sized and small browsers the float:right elements collapses under the float:left elements each time.
http://jsfiddle.net/g4dbr3ho/4
#wrap {
width: 100%;
height: 100%;
}
#main {
float:left;
max-width: 70%;
max-height: 100%;
margin-left:112px;
padding: 20px;
}
#side {
float:right;
width:auto;
max-height:100%;
background-color:black;
border-style:solid;
border-width:2px;
border-color:red;
}
What I'm looking for is to understand what method is best to use to try executing this format. I'm aware of the inline:block strategy in formatting too, but I find that inaffective in my situation here, also creating new issues.
You should create a div around the #main text. Float that one to the left, give it a width and your sidebar to.
*{
box-sizing: border-box;
}
I've added box-sizing to all. It includes borders and paddings to the width and height.
http://jsfiddle.net/qmd9shu0/1/
You can use
Inline-block (css display property) (with proper width and media queries for responsive if required)
Table-layout (widely supported)
Flexbox (good to use if >ie8 support required)
First at all, is it nessessary to put the sidemain-div inside the main-div ? If not, put both of them as a direct child of the wrapper. With this, you're able to style these elements by position attributes.
Like this:
#wrap {
width: 100%;
height: 100%;
}
#main {
position: absolute;
}
#sidemain {
position: absolute;
right: 0;
margin-left: 10px;
}
Related
I want to create a div, called 'container' that contains all the other elements on the page.
If I change the size the elements move and rearrange, -BUT- the div itself remains invisible! Using the Firefox inspector, it seems the div is -above- the page.
It seems very weird to me, as the divs are all properly nested and otherwise behave well.
My only guess is that this bit is causing some trouble; if i change the width, my layout goes crazy.
#upper {
float: left;
width: 100%;
height: 40%;
}
#lower {
float: left;
width: 100%;
height: 40%;
}
However I cannot quite pin down what is causing the issue. Any idea?
Here is my code: https://jsfiddle.net/xtaLfuLa/
I would just add display:inline-block; into container class.
#container {
width: 80%;
height: 90%;
margin-left: auto;
margin-right: auto;
background: rgb(163, 43, 43);
border-radius: 20px;
background: red;
display:inline-block;
}
This is happening because you're floating #upper and #lower to the left. You'll need to clear the float on the parent container. This is often done using a clearfix class. Add the following class to your parent container.
.clearfix {
overflow: auto;
zoom: 1;
}
https://jsfiddle.net/xtaLfuLa/3/
learn more here: http://learnlayout.com/clearfix.html
Not clear what you are looking for(share image layout) but you need to write the code for responsive layout. Make it
#results{
margin-left:0;
}
for smaller device and add it for larger device with media query..
I have this example for the very known fill-parent height problem: http://fiddle.jshell.net/y9bM4/379/ I've really tried to find a solution by googling but I cannot find anything for these requirements:
The height of the element is not known, neither by percentage nor by absolute size. So position: absolute; top: ?px; bottom: 0px would not work
The upper box should only take up the space it needs for its content, so with my little knowledge about flexbox, it seems that I cannot use it either (just used it in the example because this is kind of as closest as I got)
The outer container has a fixed height (90% of the body in this example)
It would be nice if flex: 1 in each container, is kind of the maximum growth of the upper container. Is this even possible with css yet?
I'm not exactly sure what you're trying to do, but I'm assmuning you would like the second container to use whatever space is left over after the first container is sized to its content.
If so, set the .content class with height:0 and flex-grow:1
UPDATED EXAMPLE:
http://fiddle.jshell.net/y9bM4/385/
I think problem was that you gave the container id height:90%; so it will have to forcefully cover inside it, which is not posibble, So change it with height:auto;.
This will solve your problem
JSFiddle : Updated
CSS : Code to change (Edited)
#container
{
display: block;
position: fixed;
height: 90%;
width:100%;
overflow: hidden;
background: #fff;
border:2px solid green;
}
.content:nth-child(2)
{
position: relative;
display: block;
overflow: auto;
height: 100%;
}
.content{
border:1px solid red
};
.text
{
height: 100%;
display: block;
}
I am trying to make a div with text and a div with a button fit side by side. It works fine until you make the screen really narrow. Is there a way to force them to be on the same line and for the first div to shrink to accommodate the min-width of the second?
http://jsfiddle.net/C3877/9/
To see what I mean, resize the window, reducing the width, until the div with the button is forced onto the second line. That is what I'd like to prevent.
Note: I only care if a suggested fix works properly in Chrome.
Instead of floats, you could use display: inline-block. This will keep things all on one line, and respect the min-width as well.
Inline-block fiddle: http://jsfiddle.net/C3877/8/
In addition, since you only care about Chrome, you could look into flexible boxes
A (quick) flex fiddle here: http://jsfiddle.net/C3877/11/
You can use negative margin-left for the floated right element. Note that this solution keeps using float for both the left and right divs, without using float, you have dozens of solutions (as some of other answers pointed out).
#right_div {
...
margin-left:-100%;
}
Note that all the next content should be wrapped in a block element and use clear:both. I also added a sample of such an element with background:green in this DEMO.
Appending this does the trick I suppose:
#media (max-width:515px) {
#left_div { width: 100%; margin-right: -100px }
}
UPDATED
You could use margin and absolute positioning:
CSS
#parent_div {
width: 100%;
height: 10%;
position: relative;
min-width: 40px;
}
#left_div {
width: 80%;
min-width: 100px;
height: 80%;
float: left;
background-color: #000;
color: #FFF;
}
#right_div {
width: 15%;
min-width: 100px;
float: right;
background-color: blue;
position:absolute;
right: 0px;
}
input[type=button] {
font-size: 2rem;
}
SEE DEMO: http://jsfiddle.net/C3877/19/
You will have to play with some of the css to get it just right when you move it on your website. But this is a sure quick fix.
I wish the two sections of my design (see attached image) to extend the whole height of the page. I have tried to create a Fiddle but it just won't work in there, so I've put up a link here to demo what I mean.
I have set the height of the div that holds the results to 100%. However, it doesn't stretch right down to the fixed footer.
#found-results {
height: 100%px;
margin-bottom: 50px;
background: #CCC;
}
I also want the green box to stretch down to the footer. The CSS is:
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: absolute;
background: green;
margin-left: 383px;
}
Now, if I add height: 100%; to it, it seems to work, but if one of the tabs contains a lot of text, it doesn't stretch far enough.
Any help will be much appreciated.
Equal-height columns
In a way, the tricky part isn't the fixed header and footer, or the 100% height; the tricky part is the equal-height columns. Often, it's better to fake equal-height columns (e.g., adding a grey-green background image to the parent container). Doing so typically allows the code to be simpler, more flexible, and more stable, compared to true equal-height columns. If the layout for this website proves too unwieldy, try faking the equal-height columns instead (as shown in this demo), and see if that helps the layout to become more manageable.
With that being said, the basic options for true equal-height columns are as follows:
HTML tables
CSS tables
CSS3 flexbox
CSS3 grids
JavaScript or jQuery
Here's a JSFiddle demo with true equal-height columns using CSS tables. The left column has very-tall content, and the right column has short content. The demo tested fine in IE10, Firefox, Chrome, Safari, and Opera; however, this may only work for relatively-simple layouts.
Here's a similar demo using HTML tables, in case support for IE8 is needed.
Faking the equal-height columns
Here's another demo that fakes the equal-height columns by adding a 2-color background image. This demo also tested fine in IE10, Firefox, Chrome, Safari, and Opera; however, unlike the previous ones, it's much more likely to support complex page layouts.
HTML
<div id="header">...</div>
<div id="content" class="clearfix">
<div class="column1">...</div>
<div class="column2">...</div>
</div>
<div id="footer">...</div>
CSS
html, body {
height: 100%;
...
}
#header {
position: fixed;
top: 0;
height: 120px;
...
}
#footer {
position: fixed;
bottom: 0;
height: 60px;
...
}
#content {
min-height: 100%;
padding: 120px 0 60px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(some-two-color-background.png) repeat-y 53.6% top;
...
}
#content .column1 {
float: left;
width: 250px;
}
#content .column2 {
float: left;
width: 350px;
}
Note: The apparent column widths for the background image are controlled by setting the background-position property. This allows two columns of any explicit width (px or %) to be faked using the same generic background image. Alternately, a custom background image with the exact column sizes could be used, to simplify the CSS.
I think you are after something like this? jsFiddle
I have made it a bit easier for myself by only copying the markup I needed from your website, the class's, id's and the elements used are exactly the same as on your website, that should make it fairly easy for you to implement this solution on your website.
This layout will always at least fill the whole screen, and both sections will be the same height and touch the fixed footer. When the content is to high for one of the sections, a scroll bar will appear and you can scroll down until you have reached the bottom of both sections. Both sections will always be the same height. I have added some buttons in the header which will add and remove content inside the columns, this makes it easy to see what happens when the content is taller than than the height of the document.
Edit
I realised you probably want your header to be fixed as well (as this seems to be the case on your current website), here's a version with a fixed header. jsFiddle.
Edit2
I have added some buttons to the fiddles to make it easier to see what happens when the content inside the columns is forcing the columns to be taller than than the height of the document.
HTML
<header></header>
<div id="container">
<section class="results"></section>
<section class="main"></section>
</div>
<footer></footer>
CSS
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
header {
position: fixed;
top: 0px;
height: 60px;
width: 100%;
background-color: #FFF;
}
#container {
height: 100%;
overflow:auto;
padding-top: 60px;
padding-bottom: 60px;
display: table;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
footer {
position: fixed;
bottom: 0px;
height: 60px;
background-color: #333333;
width: 100%;
}
.main {
display: table-cell;
background-color: #008000;
}
.results {
display: table-cell;
background-color: #EFEFEF;
width: 383px;
}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
I think your problem sits here: #found-results { height: 100%px; ...
...and further I think you have to add this too:
html, body {height: 100%}
you can set the height with jquery according to height of sidebar after loading page
$(document).ready(function(){
$('#main').height($('#sidebar').height());
});
You can use Jquery to achieve this.
$(document).ready(function() {
var window_height = $(window).height();
var footer_h = $("#footer").height();
var container_height = window_height - footer_h ;
$("#container").hide();
$("#container").css('min-height', container_height + "px");
$("#container").show();
});
Ok, i've tried LOTS of solutions offered in StackOverflow about this issue, but none of them have worked. I guess this is a tricky thing and needs a tricky solution.
From what I've seen, each problem is different with this 'occupying' the body thing, so I guess I'm here with a different one.
I really need help here, guys.
Here's my problem: http://jsfiddle.net/Ff49Z/5/
And heres what I want: When the "wrapper" div does not fulfill the body, I want the div to expand to the bottom of it anyway. So, in the fiddle, what I'm trying to achieve is not a gray spot on my layout. As you can see, wrappers are 100% height (that is one common solution offered in SO for this problem) and that does not help.
It is this div that does not expand to fit the wrapper:
div#middle {
padding:10px;
margin:0 auto;
height: 100%;
}
BTW, when overscrolling, footer sticks and wrapper scrolls. That is the desired behaviour, and it works flawlessly.
I simply added:
div#middlewrap {
width:100%;
position:absolute;
margin-top:60px;
}
and works as you asked. EDIT: THIS IS WRONG - correct answer below
I was about to give up when I decided to rewrite the css from scratch, and it came out simpler than I expected. I simplified your CSS to the bones and added some cool overflow-y:auto; to the middle wrapper plus some sweet position:fixed; to the header and the footer. Then I adjusted the padding to the #middle content div and added a height:100%; to the body and html(so that every child of body can be successfully set to height:100%;) and that's what came out:
body, html {
margin:0;
height:100%;
}
div#headerwrap, div#footerwrap {
position: fixed;
left: 0;
right: 0;
}
div#headerwrap {
top: 0;
height:64px;
background-color: red;
}
div#middlewrap {
height:100%;
overflow-y:auto;
background-color: blue;
}
div#middle {
padding-top:70px;
padding-bottom:35px;
}
div#footerwrap {
bottom: 0;
height:32px;
background-color: green;
}
That's all the CSS you need. Pretty cool uh?
HERE IS THE FIDDLE
Note: I respected your syntax, which is also correct, but it's not necessary to write DIV before every #ID in your css. Deleting those selectors will dramatically decrease your css file weight in bigger projects.
Cheers.
Make all parent elements as height:100%:
body, html, body>div#middlewrap {
height: 100%;
}
div#middle {
min-height:100%;
}
Impossible solely with CSS. Need javascript involved. Take the client height - (header + footer) = min height for the content
Using % height doesn't work because the parent doesn't have a height defined.