I would like to let float some div with a fixed size, let's say 300px.
I took the example from Center floating DIVs
and I insert the size of the div.
They work OK but when I re size the screen (getting it smaller) they are not anymore in the center.
Moreover I also would like to have some space between the div.
Thanks in advance.
Here the actual code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
display:table;
}
#container div
{
float:left;
padding:5px;
display:cell;
width: 300px
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:yellow">Text ffffffffffff1<p>ddd</p>
<p>r </div>
<div style="background-color:lightgreen">Text fffffffffffff2<p>ddd</p>
<p>v</div>
<div style="background-color:lightblue">Text fffffffffffffff3<p>ddd</p>
<p>b</div>
</div>
</body>
</html>
If you don't want your block to fall to the next 'row' when screen is narrow - set a min-width to your container and also set overflow to auto - to trigger scroll.
FIDDLE
#container
{
text-align:center;
margin:0 50px;
min-width: 1036px;
overflow: auto;
}
#container div
{
padding:5px;
display:inline-block;
width: 300px;
margin: 10px;
}
Could you please try it:
Remove float: left and add display: inline-block in #container div
Related
I have two fixed-width divs, first one 'main box' and the other 'other box'
I want them center-screen
and,
when browser-width permits, next to one another.
I achieve the latter by making them float:left but then since they're "out of the flow" I can't make them center screen (by margin: auto on outer div)?
Is it possible some other way?
Please see demo:
http://jsbin.com/jitus/1
When you set .a and .b to inline-block elements, you can set their parent to text-align center. Then this is your requirement.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.tc{text-align:center;}
.a, .b{display:inline-block; width:300px; *display:inline; *zoom:1;}
.a{background:blue;}
.b{background:red;}
</style>
</head>
<body>
<div class="tc">
<div class="a">aaa</div>
<div class="b">bbb</div>
</div>
</body>
</html>
If I understood the question right HERE you can find a fiddle
#cont{
margin: 0 auto;
max-width:600px;
}
#a{
width:300px;
height: 300px;
background:red;
float:left;
}
#b{
width:300px;
height: 300px;
background:lime;
float:left;
}
HTML:
<div id="cont">
<div id="a"></div>
<div id="b"></div>
</div>
Good day, Im creating a webpage with two(2) columns. The column 1 contain a PDF, I just emded it using <iframe>, then the column 2 is just like a comment sections. I don’t know if my decision is right, but I use <div> to make it like, a table with two columns.
Here is the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='skin/css/user.css'>
</head>
<body>
<div id='cont'>
<div class='wrap'>
<div>
<iframe src='upload/1.pdf'></iframe>
</div>
<div>
THIS IS THE SECOND COLUMN
</div>
</div>
</div>
</body>
</html>
Here is the css
body,html{
margin:0;
height: 100%;
}
#cont{
display:table;
width: 100%;
height: 100%;
}
#cont .wrap{
display:table-row;
}
#cont .wrap div{
display:table-cell;
}
#cont .wrap div:first-child{
width: 70%;
height: 100%;
}
iframe{
width:100%;
height: 70%;
}
#cont .wrap div:last-child{
background-image:url('../img/user-comment-back.jpg');
color: white;
width:30%;
}
There is no problem in layout it suite what I what, but the problem is the column 2 content is align to the bottom of column 1 content. Here is the screen shot,
Can someone explained me why it acts like that, and what should be the solution? Thank you
you have to add vertical-align:top; in the div. when you use table CSS property to align 2 div horizontally, then its behave like table and text start from bottom.
you just need to add this line;
#cont .wrap div{
display:table-cell;
vertical-align:top; /*Added line*/
}
Here is a Demo link. http://jsbin.com/relutute/1/
Here is what I have going on. I have my pages structured with a #wrap div and the pages content within that wrap in a #content div and then a special block of content within that div.Both css and html below. My question is, is there a way to have my screen-width-content div span outside of the 1140px width of the .wrap div that it is in. I know if I could I could simply move the div but long story short, I cannot change the HTML, only the css. Also the site is a responsive design so it has to stay that way. Solutions Anyone.
CSS
.wrap {
margin: 0 auto;
width: 1140px;
}
.content {
padding: 0;
width: 100%;
}
#screen-width-content {
width: 100%;
margin: 0 auto;
}
HTML
<div class="wrap">
<div class="content">
my pages content
<div id="screen-width-content">
screen width content
</div>
</div>
</div>
Edited the answer and seems to work:
have a look at this example, maybe it helps: http://jsfiddle.net/fR4mN/3/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
.wrap {
margin:0 auto;
background-color:orange;
width:400px;
height:700px;
position:relative;
}
.inner {
position:relative;
width:100%;
height:200px;
background-color:gold;
}
.inner-outer {
position:absolute;
height:100px;
background-color:green;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="wrap">
<div class="inner">
<div class="inner-outer"></div>
</div>
<div class="inner-outer"></div>
</div>
<script>
$(document).ready(function(){
setCheckSpaceDistance();
$(window).resize(function() {
setCheckSpaceDistance();
});
});
function setCheckSpaceDistance() {
var dist = $('.wrap').position().left;
$('.inner-outer').css({
'width' : dist+'px',
'right' : '-'+dist+'px'
});
}
</script>
</body>
</html>
You could change the width of #screen-width-content to anything greater than 100% - depending on how much you want it outside of the wrapper.
And like the comment says below, use negative margin-left to position it accordingly.
Hope this helps!
I have a single page website that is using multiple divs inside a container div. The height of each of these is set to a min-height of 100%. This works fine until content inside one of the divs is larger than the browser resolution - the content overlaps the border divs. I've tried to add position:relative to the container, and position:absolute to the children, but this causes all but the bottom div to disappear.
I've put the following together to demonstrate what I'm talking about:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<!-- Content -->
<div id="content">
<h1>content</h1>
</div>
<!-- About -->
<div id="about">
<h1>about</h1>
<!-- Contact -->
<div id="contact">
</div>
</div>
</body>
</html>
CSS
html, body{height:100%;min-height:100%;min-width:60.000em;font-size:30px;}
#container{
width:100%;
min-height:100%;
margin:auto;
padding:auto;
height:100%;
position:relative;
}
#content, #about, #contact {
position: absolute;
}
#content{
min-height: 100%;
height:100%;
background-color:red;
}
#about{
min-height: 100%;
background-color:blue;
}
#contact {
min-height: 100%;
background-color:yellow;
}
Here it is in action: http://jsfiddle.net/s62nr/1/
If I remove the relative/absolute positioning, the size is fine, but the content overlaps: http://jsfiddle.net/s62nr/2/
What am I missing?
Found the issue (seems this always happen when I ask a question ^^).
The problem was with the fact I was setting the child div height to 100%. This needs to be removed:
From:
#content{
min-height: 100%;
height:100%;
background-color:red;
}
To:
#content{
min-height: 100%;
background-color:red;
}
I was forcing the content to take up 100% of the browser height. This stopped the div from expanding automatically like it should.
Sorry if I can't explain with code, I'm newbie with CSS. How can I do this?:
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIV issue</title>
</head>
<body>
<div id="div1">
<img src="image-800x216.gif" />
</div>
<div id="div2">
<img src="image-567x43.gif" />
</div>
</body>
</html>
Is intended to work with IE (all), Opera, Safari, Chrome and FF. Is possible or I'm dreamer?
http://jsfiddle.net/XTkA2/30/
#div1 {
position: absolute;
top: 38%;
right: 1em;
width: 62%;
max-width: 50em;
outline:#999 solid 1px;
}
#div2 {
position: absolute;
bottom: 0.63em;
right: 1em;
width: 46%;
max-width: 35.44em;
outline:#999 solid 1px;
}
I've added outline for you to make divs visible. You may delete them.
Uhm...i don't understand what is your intention...but...do you want to align two images, one above another on the page center or one beside another or both images on right-bottom?
If you want to align elements in page, try this:
/* Both images aligned side-by-side at page center */
div.div1, div.div2
{
float: left;
margin: 0 auto;
}
/* One images at right, another at left */
div.div1
{
float: left;
}
div.div2
{
float: right;
}
Page bottom alignment is not possible...i guess.
Put you can use margin-top css property to do the trick.
Hope it helps.
After applying and mixing your all helpful answers and hours and hours of reading and trying css/html code from different sites... I have what I want; well, almost in 95% due to browsers compatibility. Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIVs alignment issue</title>
<style type="text/css">
#div1 {
width:62%;
min-width:16em;
max-width:50em;
right:1em;
top:38%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
#div2 {
width:46%;
min-width:10em;
max-width:35.44em;
right:1em;
bottom:6%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
.stretch {
width:100%;
height:auto;
min-width:10em;
}
</style>
</head>
<body>
<div id="div1">
<img src="http://placekitten.com/800/216" class="stretch" />
</div>
<div id="div2">
<img src="http://placekitten.com/567/43" class="stretch" />
</div>
</body>
</html>
By the way, although I prefer placehold.it to placekitten.com I use the last because the images must resize while screen does too.
You can check the result here. (Thanks to ted)