Here's an example of what I'm trying to work with: http://jsfiddle.net/U2YkF/3/
I need #container to expand to fit #right when #right extends off the right hand side of the screen. Clearfix doesn't seem to be the answer as I've tried that: it only affects the vertical content.
try this
#container {
outline: 1px solid red;
min-width: 100%;
height: 50px;
display:inline-block;
}
I was able to achieve what you needed with a few lines of JQuery:
x1=$("#right").width();
x2=$("#left").width();
$("#container").width(x1+x2);
The simplest method is to add float: left to #container.
http://jsfiddle.net/U2YkF/6/
Related
I would like to position 8 divs in the following way:
Here is my JSfiddle which has all the div code: http://jsfiddle.net/XRTh5/
What I would like to do is make the div's behave the same way as on this website with it's icons" http://cyberdust.com/. See how when you re-size the page, the icons shrink and get smaller instead of not changing?
Thanks for the help. I would like to do this only using `div's and not using tables or any old technology like that.
Strongly suggest you look at using a framework to accomplish this just as the reference website uses.
But in general it can be accomplished with css and the #media (min-width: 768px) {}
which applies different css styles when the browser viewpoint/window is resized.
There are a couple but for your specific need they use bootstrap.js http://getbootstrap.com/
Use float: left; to float your items, and percentage based widths for a layout that scales.
Remove heights from your container elements to allow them to expand and fit their contents.
Example: http://jsfiddle.net/XRTh5/37/
The site that you referenced uses media queries to adjust styles based on window width. That would also work, but percentages may be a simpler way of achieving your desired result.
UPDATE: using a neat little trick with percentage-based padding and position: absolute, you can cause the grid items to maintain an aspect ratio. See fiddle link above.
The example website you posted is using breakpoints to set the size of the icons to specific values depending on the size of the users viewport.
read up on media queries and you should be able to replicate this very easily.
You could also set the size of your icons to a percentage value rather than a fixed width or height and this would scale dynamically but will not re-flow very gracefully.
Something else to investigate is flexbox as this will flex to fit the available space quite nicely but isn't 100% supported on all browsers.
Hope this helps
if you don't need the gap in between the the rows then a few simple tweaks to your css will do:
.main {
display:table;
border-spacing:50px;
}
.row {
display:table-row;
}
.icon {
display:table-cell;
}
Example
Otherwise you just need to add and extra closing and opening main div to get the middle gap:
If you do need the gap in the middle
You need to add the following CSS:
* { box-sizing: border-box; } //border will not add to element width
.icon {
width: 25%;
height: 150px;
background-color: orange;
border: 1px solid black;
float: left; //objects will sit next to eachother
}
Also, you way want to set this all up using % values for width/height so that you can get the responsive resizing effect
In answer to your first question, how to make the div, use float:left on the icons to make them fit horizontally.
Use relative width's to make them shrink. To make them shrink and realign perfectly, you need to use media queries, which I'll not go into right now. Here's the updated css
.main {
height: 400px;
width: 100%;/*relative widths*/
background-color: green;
}
.row {
width: 100%;/*relative widths*/
background-color: blue;
}
.icon {
width: 20%;/*relative widths*/
height: 120px;
background-color: orange;
border: 1px solid black;
float:left;/*fit horizontally*/
}
.row{
clear:both;/*To stop the icons from floating*/
}
jsfiddle: http://jsfiddle.net/mDtjP/
I think that is what you need
.row div{
float:left;
}
Just float de divs
http://jsfiddle.net/XRTh5/15/
try this DEMO i change you code
.main {
background-color: green;
display:inline-block;
}
.row {
background-color: blue;
padding:5px;
}
.icon {
width: 200px;
height: 150px;
background-color: orange;
border: 1px solid black;
display:inline-block;
}
You should set float: left like here: http://jsfiddle.net/XRTh5/10/
.icon {
width: 198px;
height: 150px;
background-color: orange;
border: 1px solid black;
float: left;
}
Also remember about decreasing div size to 198px if you want to fit them in 800px (you have 2px border).
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.
Sorry for asking the same question which is asked many many times.. but my case seems to be a bit weird.. i checked all posts, but couldnot find a solution for me.
http://jsfiddle.net/pBPQ7/1/ this is my code.
I want to make rightson always stick to leftson even if you resize the window.
in my big screen, the rightson is going far to right side of screen leaving leftson in the middle. i want them to stick to each other always.. how is it possible in css? :(
Just set a min-width to your #father and make your elements inline.
#father {
min-width:476px;
}
Check this code http://jsfiddle.net/pBPQ7/15/
use
float: right
on both elements.
Like this?
http://jsfiddle.net/pBPQ7/5/
Just add a
float:left;
to both.
Make these divs with display: inline-block;
jsfiddle.net/pBPQ7/10/
Check this:
you can add margin-right to your div and add width for your father div.
#father div {
display: table-cell;
}
#father {
display:table;
width:500px;
}
Here is jsfiddle http://jsfiddle.net/pBPQ7/17/
Depend on what you want to do.
If you don't need to have a fix width for the left or the right column, you can add % on your items.
Here is an example of what you want
CSS
#father{
width:100%;
}
#leftson{
width:65%;
background:#FFFFFF;
border: 1px solid #E7E6E5;
box-shadow: 0px 0px 35px gray;
float: left;
}
#rightson{
width:30%;
float: left;
box-shadow: 0px 0px 35px gray;
}
Otherwise, you can float your content (with the same size). Here is an other example
Another possibility, If you have a fixed div in width, you can resize only the other one when resizing. Here is an example
For some reason my footer border is at the top of the page while the text is at the bottom. Can anyone tell me why it's doing this?
Your can see the page here:
I would expect the red line to be just above my footer. What am I missing?
Floats can cause layout issues like this. Since you are only using them on your content containers you can remove the float: left; from .search_summary_container and add display: inline-block;.
Demo: http://jsfiddle.net/ThinkingStiff/HSNNZ/
.search_summary_container {
height: auto;
width: 480px;
margin-top: 10px;
border: 1px solid #c1d1da;
display: inline-block;
}
Add clear:both to your footer:
<div style="padding-top:10px;border-top: solid 1px #ff0000; font-size:11px; clear:both;">...</div>
Explanation: If you have a float left and a float right, then, the content that comes after will go under your floats. So by clearing, it resets the floats and renders it after the content that is floated.
In the footer, just set the css to clear:both.
Read this article: http://css-tricks.com/all-about-floats/
I have a div (#itemSelector) containing a variable type of div (.item). I need to evenly space the .item divs in the parent div. The .item divs have display: inline-block and need to stay that way.
Just for clarity: I want the div's contained in #itemSelector to get evenly spaced horizontally along the entire width of the div. The amount of divs in the parent can vary.
jsFiddle of the simplest usecase: http://jsfiddle.net/xTZ8z/
Edit: thirtydot suggested a solution to me which interesting looking
Created a jsFiddle of it: http://jsfiddle.net/xTZ8z/82/.
Wrapping a div around my .item divs with display: table-cell seems to work, tho this is not entirely what I'd like. Any other suggestions like this?
I know you stated that you needed to keep your divs with display: inline-block, but this method seems to achieve the effect you are looking for.
JSFiddle of the code: http://jsfiddle.net/xTZ8z/40/
EDIT: #Exelian this achieves the desired effect you are looking for: http://jsfiddle.net/xTZ8z/63/
EDIT: #Exelian This is a slightly altered and commented version of the previous code:
http://jsfiddle.net/xTZ8z/88/
I hope that helps!
You could do something like this:
#itemSelector {
width: 100%;
border: 1px dashed red;
margin: 0 auto;
padding: 0;
}
.item {
display: inline-block;
background-color: grey;
width: 25%;
text-align: center;
height: 100px;
line-height: 100px;
margin: -2px;
padding: 0;
}
That should do the trick
Example here
What about a table set to width 100%?