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)
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 3 columns in css aligned beside each other. I don't understand why when I zoom into the browser the UI becomes responsive? For example when I zoom in the browser, <p>helooooo<p/> will enlarge only in respect to the column. On zooming in notice how the columns remain at their specified width? why does that happen? shouldn't the columns also expand in respect to the text?
body, html{
width:100%;
height:100%;
margin: 0px;
padding:0px;
}
.col1{
min-width:30%;
height:100%;
background-color: gray;
float:left;
}
.col2{
min-width:40%;
height:100%;
background-color: blue;
float:left;
}
.col3{
min-width:30%;
height:100%;
background-color: red;
float:left
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="col1">
<p>heloooooooooooooo</p>
</div>
<div class="col2">
<p>heloooooooooooooo</p>
</div>
<div class="col3">
<p>heloooooooooooooo</p>
</div>
</body>
</html>
Your example doesn't show any change when zooming in or out. But anyway, when the browser zooms, it's essentially changing the width of the viewport.. so if you have media queries, they will come into play.
This because you have set the column lengths to a specific value.
min-width:40%;
height:100%;
So whether you zoom or not, it will be of the same percentage. meaning it wont be zoomed.
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'm trying to make a div have a width using the absolute positioning and it work fine in google chrome but in fierfox it doesnt. why is there a conflict ? i tried the exact same code in both browser and on fierfox doesnt reconize it.
<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8"/>
<title>Kelma</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="text" id="center" />
</body>
</html>
and this is the css file
#center{
position: absolute;
left:50px;
right: 50px;
}
Take a look at this:
<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8"/>
<title>Kelma</title>
<link rel="stylesheet" href="style.css" />
<style>
#wrapper
{
position: absolute;
left:50px;
right: 50px;
}
#center
{
width:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="text" id="center" value="test" />
</div>
</body>
</html>
i wrapper the input with a div, and i applied the styling to the div, and 100% width to the input.
I've gotten it to work with inline css
here is an example from my personal website
<div style="position:absolute; top:60px; bottom:5%; left:5%; right:5%; width:90%; text-align:center;"> SOME TEXT </div>
I personally like to use the percent as it can look better on some sites. Let me know if this works for you! To see it live: http://cbogausch.com/portal It works in both firefox and chrome
Try this:
#center{
position: absolute;
left:0px;
width: 100%;
}
Isn't this what you mean?
body{padding: 0 50px;}
input{width:100%;
Use this on your css:
#center {
margin: 0 auto;
width: 90%;
}
Hgs,
Vinicius =)
I am trying to find a way to center the logo + text. The image+text should be center vertically and horizontally.
I tried couple of things and now i have this html
<html>
<head>
<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#floater {float:left; height:50%; margin-bottom:-120px;}
#Content {
clear:both;
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:center; /* Counteract to IE5/Win Hack */
padding:15px;
height:240px;
position:relative;
}
#text-center{
text-align:center;
font-family:Tahoma, Geneva, sans-serif
}
</style>
</head>
<body>
<div id="Content">
<img src="logo_small.jpg" width="400" height="143">
<p id="text-center">Coming soon</p>
<p id="text-center">more text</a></p>
</div>
</body>
</html>
I don't know anything related to html/css
Here's what I came up with: http://jsfiddle.net/CMfEH/
I used a variant of what's descriped in Vertically Centering in CSS.
Vertically aligning content is typically a bad practice but can be achieved using
EDIT: had to switch up some css...
#Content {
margin: 0px auto;
...
height: 100%;
}
#subContent {
position: absolute;
top: 50%;
height:240px;
margin-top: -120px;
}
And creating a <div id="subContent"> div inside your Content parent div.