I am trying to align two divs horizontally and I got it to work using display:inline-block
however when I put overlfow-x:scroll to the main container it doesn't work. If the screen is smaller, one of the div goes to the bottom. How can I achieve this? I don't want the second Div to go to the bottom if the screen is small.
Here's fiddle
<div class="container">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>
.container{
display:table;
margin: 0 auto;
overflow-x:scroll;
}
.test1{
background-color:red;
width:500px;
margin-left:16px;
display:inline-block;
}
.test2{
margin-left:40px;
display:inline-block;
background-color:gray;
width:80px;
vertical-align:top;
}
give parameters to width and height, so container can overflow.
http://jsfiddle.net/f5HWD/3
.container{
width: 900px;
height: 700px;
display:table;
margin: 0 auto;
overflow:scroll;
}
I altered your code slightly and made the contents float left.
In order you get it to work, you just had to create a wrapper class. You need the outside container to be large enough to just fit your test divs, while the wrapper is large enough to hold both combined. This should be fairly easy to figure out and edit according to the heights/widths that you want the divs to be.
Fiddle
Hope it helps.
Related
I know it's a super-basic question, but I'm not able to find a solution. I have 2 div and I would like to display them as blocks (one below the other) without having 100% width. Here's my code.
HTML
<div id="container">
<div class="test">one</div>
<div class="test">two</div>
</div>
CSS
.test {
display:inline-block;
clear: both;
border:1px solid;
}
#container {
clear:both;
text-align:center;
}
Unfortunately this answer doesn't fit to me, since I need to center blocks horizontally (so float cannot be applied in my case). Here's the fiddle. Thanks in advance.
to center them on top of each other without taking 100% width and still use margin:auto; use : display:table;
.test {
display:table;
margin:auto;
border:solid;/* to see it */
}
You can specify the width of the divs, change display to block, and use margin: 0 auto to center them.
JSFiddle
You can also center the div by adding 50% left offset, and then negative margin in amount to half width of the div. I do not know how much is this applicable to your case, but here is an example:
.test {
position: relative;
border:1px solid;
width: 300px;
left: 50%;
margin-left: -150px;
}
You can see it in action here: http://jsfiddle.net/b8LuQ/7/
display:inline-block; is not allow the second line. Therefore I removed it and define width for both div test one two you can resize it and margin:auto is align center the both div in container here is an example
I am trying to make a fluid grid website and now im facing a problem which a just cant seem to fix just using css. Obviously i'm doing something wrong, but i just cant find what.
Here's the thing: I have one column (div: left) and one body (div: right) displayed in-line. in stage one div left has a width of 180, and div right is growing till it reached 640px (like youtube). In stage two i want to make the column grow some more from 120px to 150 px, But when the column is growing div right gets pushed down, even though there is enough space. Im thinking it has something to do with the margin's technique ive been using but i cant find it, and dont know any alternatives i could use since im trying to do this without using java.
Here is my jsfiddle: which will show the problem clearly: http://jsfiddle.net/tomvisser/WcbYL/embedded/result/
I happy with all help i can get.
Thanks in advance.
<body>
<div class="gridContainer clearfix">
<div id="center">
<div id="left">This is the content for Layout Div Tag "left"</div>
<div id="right">This is the content for Layout Div Tag "right"</div>
</div>
</div>
</body>
here is the css:
#left {
float: left;
height:400px;
width: 150px;
display:inline;
background-color:#F00;
}
#right {
margin-left:150px;
background-color: #6F0 ;
height:400px;
}
#media only screen and (min-width: 650px) {
.gridContainer {}
#right {
margin-left:0px;
width:500px;
float:right;
display:inline;
}
#left {
margin-left:0px;
float: right;
width:100%;
margin-right:500px;
}
Yes it's the margin pushing it down. Not sure what you're asking exactly but I can probably bet you're looking to give the 2 divs the max-width property.
So for step 2 (the media query?), delete the margins and try doing something like:
max-width: 180px;
for the left column.
This is the code I edited in your media query block:
#right {
margin-left:0px;
width:500px;
float:right;
display:inline;
}
#left {
margin-left:0px;
float: right;
max-width:180px;
}
Although do you have them floating right on purpose?
Hi i tried your code and find a solution for you.Hope it will help for you.Here i am
assuming the total width of a page is 1024px.
HTML code
<div class="gridContainer clearfix">
<div id="center">
<div id="right">This is the content for Layout Div Tag "right"</div>
<div id="left">This is the content for Layout Div Tag "left"</div>
</div>
</div>
CSS
<style type="text/css" >
#left {
height:400px;
background-color:#F00;
width:512px;
}
#right {
background-color: #6F0 ;
height:400px;
float:right;
width:512px;
}
</style>
Here i am giving width 512px to each div because i am assuming that total width of page
is 1024px.If you want to increase the width of left by 12 px means 512px + 12px = 524px
then you need to decrease 12px from div right width because width cannot be more
then total width of page i.e 1024px.After decreasing it will become 500px and again
524px + 500px = 1024px.In that case your right div will not push down.
Hope you understand and will work for you.
I can't seem to figure this out.
I have the following code:
<div id="wrapper">
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
//
</div>
I want the div #wrapper to of fixed width. And I want each .schedule to be also of a fixed width. I then want, it I have too many in the div, I could just scroll left and right inside that page.
I can't do this!! No matter what I try, when I add more .schedule, they pop to the bottom of the page, and start filling the next row!
Cheers
Kousha
EDIT: Thank you. All the results work. EXCEPT I need to be able to use float: left; or something so that all divs are stock to each other! How can I do that?
It can be done with the following CSS:
#wrapper {
overflow-x: auto;
white-space: nowrap;
max-width: 300px;
border: 1px solid red;
}
#wrapper .schedule {
display: inline-block;
padding: 5px;
}
I've put together a basic JSFiddle demonstration.
Live Demo
Hi now used to this css
#wrapper{
min-width:200px;
background:red;
font-size:0;
white-space:nowrap;
}
.schedule{
height:100px;
font-size:12px;
width:100px;
background:green;
margin:1px;
display:inline-block;
vertical-align:top;
}
Demo
Now change to width or height according your layout .........
I suspect what you want is the schedule-divs to float to align themself on the same height.
Try adding this to your css:
#wrapper{overflow:auto;}
.schedule{float:left;}
Sorry if I missunderstod your specification, but I think that's what you really want.
It seems there are several posts on this topic but none of the solutions have worked for me. Perhaps someone can figure out what I'm missing.
I have three boxes floated next to each other like columns. Due to certain background images etc., each box is composed of two divs. The outer div has the class "calloutbox" and is floated left. Inside of "calloutbox" is another div called "callout-content" that holds the dynamic content (I'm using wordpress).
So far I have not been able to get the boxes to expand to fit their dynamically generated content. They collapse if I set height to 100%. I've tried a dozen combinations of overflow:hidden, clear:both etc. with no luck.
<div id="callout-container">
<div class="calloutbox">
<div class="callout-content">Dynamic content goes here</div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
</div>
Here is the css:
.calloutbox {
min-height:310px;
width:30%;
float:left;
margin:0 0 0 25px;
position:relative;
background-image:url(images/shadow.png);
background-repeat:no-repeat;
background-position:right bottom;
display:block;
}
.calloutbox:after {
clear:both;
}
.callout-content:after {
clear:both;
}
.calloutbox:nth-child(1) {
min-height:200px;
}
/*The content inside the three boxes on the homepage */
.callout-content {
height:100%;
width:90%;
right:8px;
border:1px solid #e6e4e4;
bottom: 8px;
background-color:white;
position:absolute;
background-image:url(images/yellow-title-bar.png);
background-repeat:repeat-x;
background-position:top;
padding: 0 10px 10px 10px;
}
Here's the code in a jsfiddle if that helps anyone: http://jsfiddle.net/daniec/r8ezY/
Thanks in advance!
They are not floated, they are absolutely-positioned.
Absolutely-positioned elements are no longer part of the layout. They no longer have parents are far as layouts are concerned. Therefore, you need to specify their sizes in pixels rather than percentages. Percentages are relative to the wrappers they no longer have.
Working with floats can be a pain. As an alternative, have you tried using to use inline-block:
display: inline-block;
It behaves like an inline element, but an be styled like a block level element. It does not work in IE6 though.
.calloutbox {
white-space:nowrap;
}
Should do the trick. otherwise try creating a jsfiddle, so we can run your code
ive been making pages using tables forever. recently ive been trying to switch to divs since everyone seems to have done that, and its been a pain. anyway i was thinking if anyone could be nice enough to help me figure this one out. i have attached a picture that will explain the problem because after all a picture's worth a thousand words. thanks in advance.
[image removed]
do you mean something like this?
html:
<div id="content"><br/></div>
<div id="navigation"><div><br/></div></div>
css:
html,body{
height:100%;
margin:0;
padding:0;
}
#content{
width:800px;
border:1px solid red;
min-height:100%;
margin:0 auto;
position:relative;
}
#navigation{
position:absolute;
top:0;
width:100%;
height:100px;
background:gray;
}
#navigation div{
width:800px;
height:100%;
background:lightgray;
position:relative;
margin:0 auto;
}
demo:
http://jsfiddle.net/Z8UDf/
To center a div use CSS margins:
<div style="width: 800px; margin: 0 auto"></div>
Inside that div you can then place your navigation bar which will fill up the space available to it.
With regards to the spaces either side of the main content you have two options.
You can set a background-image on the body at top repeat-x so that it appears that you have a horizontal bar right the way across your page.
You can split the navigation from the main body, have both centered using the method above. Wrap the top 'navigation' div with another div that will be 100% width. You can then style that div as you wish. This has the advantage that you can move it without updating your background images.
use css style
<div style="position:absolute;left:100px;top:150px;" > MyDiv1 </div>
<div style="position:absolute;left:130px;top:150px;" > MyDiv2 </div>