I want to use this format to create a css "table" within my layout.
However defining the height in any of the elements still doesn't change the height of
the "table" with the floats in it.
I want the table to remain dynamic, but I can't find a way to make this height shrink because at the moment it is leaving a large amount of blank space at the bottom after the content in the floats.
Thanks for any help!
Js Fiddle Showing Gap
#right { height:775px; } <----- is this the gap you're trying to eliminate?
If so, it's nested inside your main content block(s). Removing it, will allow the height to expand with content.
http://jsfiddle.net/NAA8w/3/
Related
I have the following layout I need to solve
I understand that the whole idea of the responsive design is to leave the height to adjust to the content, but for this particular work the customer wants it this way no matter how I have to figure it out but I'm struggling hard to achieve it
In my mockup I have a 100% height and weight body, and then a container taking 85% height of the body size.
Inside that container there are the following elements:
A Top div container with the company logo
A Progress bar with a step number
A small div with some instructions for the current step
A Div containing the form elements that the user has to fill
A bottom div with 2 navigation buttons
The content should be always visible no matter the device used (see image below)
Number 4. has a inner scrollbar with overflow-y because that content will change
In order to do this i set heights in percentage (%) for each div within the container, however I need some padding for the elements, but when the browser resizes or the device changes height and width the elements overlap each other
I don't want to rely on a bunch of media queries to fix this. I wonder if anyone can find an approach or some reference for this since i can't seem to find it
Thanks
If you don't want to use many media queries, I think you should use Jquery (or Javascript) like this:
Fixed height of all div except FORM CONTENT (include padding, margin, border with box-sizing: border-box). You can use some media queries for best style.
Use Jquery to calculate height of FORM CONTENT (this is scrollable content)
Example:
$('#form-content').height($(window).height() - X);
// With X = total height of other divs includes margin, padding, border
Call this script in $(document).ready(...) and $(window).resize(...)
Hope this help.
So, I have this code
http://pastebin.com/W3ggtgZB as css, and the body looks like this:
http://pastebin.com/2tkmhnfW
What I am trying to do is create a div with two children divs, one of which has a fixed width, and the other one I want to fill the rest of the blank space. I'm eventually going to want a div going across the top of this side div, too, but, that comes later. My issue is, the child div sub1 expands to be 100% of its parent width, which is an issue, because then it overlaps out of the parent div and keeps going. I tried things like floating left, using block and inline, I tried setting the width to auto (which makes it disappear for some reason) - but nothing seems to really work. It looks okay, at first, but when you zoom in, sub1 kinda follows its own rules. Can someone help me fix it so that sub1 will just fill in the rest of the space left in the main div?
Here is the answer:
http://dabblet.com/gist/6069015
Only need to specify the side column's floating and the rest will take place as you want, adapting the screen size as well.
Hope it helps!
I've been trying to make a horizontal web page. However I don't want to keep setting the width to a certain width to accommodate the content that is floated is there a way to have the Div automatically re-size to the content that it contains? This way all the content is floated or "horizontally" scrolling? I'm using width:"specific size" but as soon as I have too much content it overflows is there a way to not have that happen and also where I don't have to specify a specific width size?
EDIT:
What I want is the whole website to be horizontally scrolling. I don't want just the specific div itself to have scrollbars, but I want the div to be able to adjust it's width to accommodate the content no matter if I have 3 divs within it or if I decide to add 6 divs later into the div.
For example what I want is like this. (Where even if I have more content it won't drop to the next line) I mean can this be achieved with css alone?) I specifically want that effect where the whole website is scrolling not just the div I don't know exactly if that website is doing that. Basically I want the whole website to scroll horizontally not just a scroll bar on the specific div itself.
For example vertically if you have more content you can keep scrolling down that is what I want, but I want that in a horizontal scroll of the website is that even possible?
Here is my code Jfiddle Code which is for tumblr but I want this for more than just tumblr. As I'm thinking of doing this for a regular website but where I manually will add more list items or Divs. I just want to see if there is a way to have the width adjust to the content so the floated content doesn't drop to the next line.
I think what you need is display: inline-block;
Like this: http://jsfiddle.net/ZDJbH/
Check this fiddle , is that what you need
div{
width:auto;
overflow:auto;
white-space:nowrap;
}
Set the css width property to auto
#yourDiv {width : auto;}
1.display:inline-block
2.float:left or float:right Because it will destroy line box.
3.position:absolute；（and without top, left or position:absolute) May be need to know information to use it.
I have two divs as follows:
fluid width content
fixed width content
I'm trying to make it so that when the available screen width is > 600px, they'll appear side by side. When the screen is resized below that, the second div needs to drop down below the first one. In either scenario, they need to take up all available width (so when the second one drops down I can't have a 200px padding/space on the right of the first one).
I believe it's possible to do this with JS and/or css3/media queries, but I'm wondering if there's a simpler solution?
To put it in context, I need to design a fluid page that will be displayed via an iframe. I will not be able to control the width of the iframe, so need my two column content to be fluid.
Apply a min-width to the div that's not floating. If the browser can't satify the min-width with the floating box to the side, it'll drop the floating box down and the fluid width box will fill the entire width, until it gets shrunk to its min-width again in which case it overflows the body.
Try this:
div
{
min-width:100px;
max-width: 150px;
background-color:yellow;
float:left;
}
min-width and max-width
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.