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/
Related
I've seen there are a couple questions similar to this one but none of them seem to solve my problem.
I want a very simple design:
Two or more divs stacked on top of each other, each of them docked to the right. I'm practicing for a test on which using the float property is not allowed.
body{
width:900px;
height:850px;
margin-left:auto;
margin-right:auto;
}
#header{
width:900px;
height: 225px;
position: absolute;
right:0px;
border:1px solid black;
}
#cen{
width: 900px;
height: 240px;
position: absolute;
right:0px;
border:1px solid orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="header">
</div>
<div id="cen">
</div>
</body>
</html>
Now, when I only had one div (header), this worked, it was docked right. But when I add the 'cen' div it is also docked right but, instead of going underneath the 'header' div, it just goes over it.
Any ideas how to fix this?
Thanks.
Absolute elements won't behave in a decent manner they won't bother any blocks in their ways.
Since the element header has a height you can add the cen element under it by giving top:"whatever the height the header is"
Here the height of the header is 225px
Stack the cen in a position of top: 255px so it will be below the header.
Try this...
*{box-sizing:border-box;}
body{
width:900px;
height:850px;
margin-left:auto;
margin-right:auto;
}
#header{
width:900px;
height: 225px;
position: absolute;
right:0px;
border:1px solid black;
top:0;
}
#cen{
width: 900px;
height: 240px;
position: absolute;
right:0px;
top:225px;
border:1px solid orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="header">
</div>
<div id="cen">
</div>
</body>
</html>
Statically positioned block elements (divs) will stack like you describe by default. So there is no need for absolute positioning.
Also, there is no need to set a width because:
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
body {
width: 900px;
margin-left: auto;
margin-right: 0;
}
#header {
height: 225px;
border: 1px solid black;
}
#cen {
height: 240px;
border: 1px solid orange;
}
<div id="header">
</div>
<div id="cen">
</div>
You can use flexbox for something like this:
.container {
width:100vw;
display:flex;
justify-content: flex-end;
}
.column {
display: flex;
flex-direction:column;
flex-basis:33%;
}
.row {
display: flex;
background-color: red;
width: 100%;
flex-grow: 1;
height: 100px; /* can be whatever you like */
margin: .25rem;
}
<div class="container">
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
CSS Grid would probable work even better, but I haven't worked with it enough.
I have a div which contains five img tags.
Here is the html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div class="container">
<img src="Images/1.jpg"/>
<img src="Images/2.jpg"/>
<img src="Images/3.jpg"/>
<img src="Images/4.jpg"/>
</div>
</body>
</html>
Here is the stylesheet:
img
{
position:relative;
border:1px solid red;
width: 250px;
height: 150px;
margin-left:auto;
margin-right: auto;
}
.container
{
position:relative;
margin: 0 auto;
width: 80%;
border:1px solid red;
border-radius:10px;
padding:10px;
}
When I'm resizing the browser window everything got messed up.
This is the normal form
This is the form after resizing
I want pictures to stay in their places.
How can i fix this?
Add white-space:nowrap; to your .container div:
.container {
position:relative;
margin: 0 auto;
width: 80%;
border:1px solid red;
border-radius:10px;
padding:10px;
white-space:nowrap;
}
Remove position:relative and try using float:left or center
Give width of .container as pixels not as %. If you have 4 div give width(.container) as 1000px(4*250).
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 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
I am trying to do a dynamic grid layout with links to other pages, consisting of a picture and a text.
The problem is that I don't seem to find any way of introducing a whitespace (padding/margin) after the grid layout. In other words, The page ends exactly where the main div ends.
Here is the code. Any help is greatly appreciated, as I have tried a lot of methods, and neither one of them worked. Thanks a lot.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" />
</head>
<body>
<div class="header"></div>
<div class="body">
<!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
<a href="" class="categorie">
<img src="imgs/asd.png" class="imagine"/>
<div class="nume"> </div>
</a>
</div>
</body>
</html>
CSS :
html
{
background-color:Grey;
height:auto;
}
body
{
display: table;
padding:20px;
margin: 0 auto;
height:100%;
}
.header
{
background-color:white;
width:700px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:75px;
}
.body, .body>html
{
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
position:absolute;
display:block;
height:auto;
}
.categorie
{
background-color:white;
margin-left:20px;
float:left;
margin-top:20px;
height:180px;
width:150px;
}
.imagine
{
width:150px;
height:150px;
}
.nume
{
background-color:green;
width:150px;
height:30px;
margin-top:-5px;
}
I'm not sure exactly why there was a display: table on the body element, you said:
"Because I use position:absolute in the .body class.. otherwise, the .body will not extend to encapsulate all of the links."
So I was able to remedy both problems by removing both the display: table from the body element and position: absolute from the body class, then added overflow: auto to the body class.
The CSS:
body{
padding:20px;
margin: 0 auto;
height:100%;
}
.body, .body>html {
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
display:block;
height:auto;
overflow: auto;
}
The JSFiddle:
http://jsfiddle.net/Artsen/VhSdg/
Here is a working fix, in case for some reason, you'd want to keep the body table display.
http://jsbin.com/agucar/2/edit
First change
.body, .body>html
{
position:absolute;
}
to
.body /* removing .body>html didn't change a thing, meaning it was useless */
{
float: left;
}
That way you will be able to clear the floats with a clearfix div (as if correctly relatively positioned) and if you keep your clearfix div transparent, the height you give it will serve as "margin".
Add <div id="clearfix"></div> after <div class="body"></div>, and give the clearfix this CSS:
#clearfix {
height: 20px;
width: 100%;
position: relative;
clear: both;
}
EDIT: Artsen's answer works too, and if you don't need to keep the .body {display: table}, his answer is more suited.