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
Related
Everything was going great until I attempted to text-align:center; my divs. Apparently divs that are floated left ignore text-align but the floated div needs to be that way to have two of the smaller divs on the same line as it.
It's hard to explain but here is an example of the code to describe it better:
https://jsfiddle.net/8fu5b9td/3/
.featured-series {
width:606px;
height:406px;
display:inline-block;
float:left;
margin:3px 3px 3px 3px;
background-color:black;
}
All I want to know is how to make the featured-series div act like the standard-series divs and centre itself at the same time. Thanks!
Remove the float:left; and add margin:0 auto; to it.
.featured-series {
width:606px;
height:406px;
display:inline-block;
margin:0 auto;
background-color:black;
}
Try this https://jsfiddle.net/8fu5b9td/7/
CSS
#media(max-width: 930px) {
.featured-series {
margin: 0 auto;
float: none;
}
}
#media(max-width: 610px) {
.featured-series {
background-color: black;
display: block;
height: 200px;
margin: 0 auto;
vertical-align: top;
width: 300px;
float: none;
}
}
I ended up fudging it with a little bit of JS. I know it's naughty but it does the job and it's fairly cheap on resources.
function centerContent(){
$('.center-content').width( Math.floor($('.body').width()/306)*306 );
}
setInterval( centerContent, 250);
.center-content has margin:0 auto; and it is the container for all of the series divs. I found that because I couldn't set the width, I really couldn't do much so I have JS set the width to the best possible fit depending on the screen size.
Not the cleanest solution and I'd much prefer pure JS but if it works, it works.
Edit: The .body class is an div which loads ajax inside of it, when it changes size it's basically like the changing size on a normal page.
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).
It's my button:
<div id="body">
<button>Hello</button>
</div>
and its style:
#body{
width:400px;
margin:0 auto;
background:#eee;
border:1px solid #ccc;
}
button {
display: block;
margin: 0 auto;
}
It's centered, but let's see the result in ipad:
It shifts to left.
Take a look at this case: http://jsfiddle.net/c2HLe/9/
Note.
This is similar to my previous question, but in this case I made it with a simple structure, so I think people can focus better on the problem.
To center your button using margin: 0 auto;, you also need to define the width of the button. Something like this.
Alternatively, you can also use this.
#body{
text-align: center;
}
button {
display: inline-block;
}
In your original CSS, if the width of the container (margin+border+padding+content width) exceeds 1024px (iPad viewport width), you will get unexpected results. So make sure you keep that in mind.
I have several divs inside another div (let's call it container) and I was wondering if it possible to extend the width of a child div to go beyond the width of the container div.
It's easier to explain if you could take a look at this jsfiddle.
Currently, the container div has the width of 80% and so do all the child divs. I want to extend the width of the first div to 100% so that it completely fills the page horizontally.
How would I achieve this?
By the way, the reason I want to do this because I use the grid structure provided by this and it requires that eveything must be included inside a container div in order to get the features provided by the structure.
EDIT: I just realized the width of the container div is specified in px, and not in % as in the jsfiddle example. So setting the width of the child div to 120% does not guarantee to fill the page horizontally. How should I approach my problem? The only way I can think of right now is to get the width of screen in px, but I don't think that is possible in CSS.
I wouldn't do this but it seems to work:
#greendiv {
width:120%;
margin-left:-10%;
background-color: green;
}
See the Fiddle.
Why can't the #greendiv be before the .container or some other wrapper div?
Edit. Turn you thinking upside down (not really, just make a custom container inside mandatory container, here the .yellowdivs are custom containers and the #greendiv is the full width container inside container):
.container {
width: 100%;//or some amount of pixels and the yellow divs follow that setting
margin: 0px auto;
}
.yellowdiv {
width:80%;
margin-left:10%;
border: solid 1px;
background-color: yellow;
}
#greendiv {
background-color: green;
}
See the Fiddle.
If the parent container is centrally-aligned, you can use negative margins on both left and right sides:
#greendiv {
background-color: green;
margin: 0 -12.5%;
}
See fiddle here - http://jsfiddle.net/CtsTQ/12/
Add overflow:visible to your parent div which is .container.
.container {
width: 80%;
margin: 0px auto;
overflow:visible;
}
#greendiv {
background-color: green;
width:500px;
}
LIVE DEMO
Well I got what you asked for by doing this:
#greendiv {
background-color: green;
width: 140%;
margin-left: -20%;
}
But this is not a good practice I think...
Its usually not a good idea to extend stuff beyond wrapper containers but if I had to do it I would most definitely use relative positioning like this.
#greendiv {
position:relative;
left:-10%;
width:120%;
background-color: green;
}
You could also use other units like px to achieve more precise results.
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/