I have a div and when i put a picture inside that dive and only set the width of the picture so it can have its proper proportions the div does not expand to the size of the div its in?
Please could you help?
(If you run the code below I want the pink div to expand when I add anything into it)
Thanks a lot!
html
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="gigantic">
<div class="main">
<div class="twitterPP">
<img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
</div>
<div class="mainMedia">
<img src="http://rack.1.mshcdn.com/media/ZgkyMDEzLzAzLzA4LzY1L2F0dC4yZjU4Mi5qcGcKcAl0aHVtYgk5NTB4NTM0IwplCWpwZw/91fe06f6/108/att.jpg">
</div>
</div>
<div class="main">
</div>
</div>
</body>
</html>
css
.gigantic
{
width: 900px;
margin-right: auto;
margin-left: auto;
background-color: #0f0;
padding: 6px;
margin-top: 100px;
}
.main
{
width: 800px;
background-color: #f0f;
margin-right: auto;
margin-left: auto;
margin-bottom: 100px;
}
.twiterpp
{
width: 60px;
float: left;
margin-right: 50px;
margin-left: 50px;
}
.twitterpp img
{
width: 55px;
height: 55px;
border-radius: 3px;
margin-left: 6px;
margin-top: 6px;
position: relative;
}
.mainMedia
{
float: right;
width: 700px;
}
.mainMedia img
{
width: 700px;
}
Try setting like this -
HTML
<div class="img-box"></div>
Css -
.img-box {
background-image: url(images/yourimg.gif);
background-repeat: no-repeat;
width: 100px;
padding: 0px 0px 0px 0px;
}
Then set width to match your own preference and padding to control image placement
You can use height:auto; to set the height of the div automatically when the image changes. The same for width as well if you want to set the width automatically.
Also you typed .twitterpp when it should be .twitterPP. Avoid using caps for classes and ids.
Related
how can I make div left3 bottom and left4 bottom align to the bottom (like left2 bottom) and also stretch left2 top div over full width?
I tried vertical-align: bottom; but it does not help.
cheers,
Pete
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
.wrapper{
margin: 0px auto;
width: 940px;
background-color: #28cf21;
}
.header{
width: 100%;
background-color: #12bf81;
}
.left1{
float: left;
margin-right: 20px;
width: 220px;
height: 500px;
background-color: #fc0234;
}
.left2{
float: left;
margin-right: 20px;
width: 220px;
height: 500px;
background-color: #f78325;
}
.left2oben{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
}
.left2unten{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f11325;
}
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
}
.left4{
float: left;
width: 220px;
height: 250px;
background-color: #f78325;
}
body {
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #00ccff;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="left1">
left1
</div>
<div class="left2">
<div class="left2oben">
left2 top
</div>
<div class="left2unten">
left2 bottom
</div>
</div>
<div class="left3">
left3 bottom
</div>
<div class="left4">
left4 bottom
</div>
</div>
</body>
</html>
Have you tried using "bottom" in css?
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
position: absolute;
bottom:0;
}
.wrapper{
margin: 0px auto;
width: 940px;
background-color: #28cf21
Position:relative;
}
When both .left3 and .left4 are set to float:left there will be an issue of the two overlapping. for that you can use different float settings, or use left or right in css just like we used bottom.
Explanation
In css, we set bottom to 0 for .left3 and .left4, this means the two divs, are 0 pixels from the bottom. The same can be used for top, right left.
Position must be set to absolute, in order for this feature to work.
Also, its a good idea to get into the habit of putting a semi-colon at the end of every statement in css, regardless if its the ending statement in the brackets.
UPDATE
Set the position for the wrap div to relative, then the position for the inner div to absolute. The positioning means the contents can overlap each other, so you must maintain fixed heights for your content
hope it can helped you :)
.left3{
float: left;
margin-right: 20px;
width: 220px;
height: 250px;
background-color: #f78325;
bottom: 0!important;
position: absolute;
}
.left4{
float: left;
width: 220px;
height: 250px;
background-color: #f78325;
position: absolute;
bottom: 0;
left:38%;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Meriniuc Răzvan - Dumitru</title>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div id="header">
<h3>
Cv
</h3>
</div>
<div id="footer"></div>
</body>
</html>
.left {
border-radius: 10px;
background-color: green;
height: 310px;
width: 75px;
float: left;
margin-top: 65px;
}
.right {
border-radius: 10px;
background-color: blue;
height: 310px;
width: 50px;
float: right;
margin-top: 65px;
}
#header {
position: fixed;
height: 65px;
background-color: red;
width: 720px;
border-radius: 10px;
display: block;
}
#footer {
clear: both;
height: 65px;
width: 720px;
background-color: black;
border-radius: 10px;
}
h3 {
margin: auto;
}
With "margin:auto".
Without "margin:auto"
I am learning HTML and CSS and have tried to create a CV page, but my header won't center. I have read about this problem and the general solution seems to make the header display as a block, but it still doesn't work.
Could you please explain why this code does not center my header and offer a possible solution? Thank you in advance!
Auto margins centre the element. They don't centre the inline content of it.
The header is centred. The text "Cv" is aligned to the left of the header.
To centre that, use text-align.
Use text-align: center; The h3 tag contains text.
h3 {
text-align: center;
}
First sorry for bad English.
I create the following code:
HTML:
<!DOCTYPE html>
<html>
<head lang="fa" dir="rtl" style="font-family: tahoma">
<meta charset="UTF-8">
<title>test</title>
<link rel="Stylesheet" type="text/css" href="st.css">
</head>
<body>
<div id="container">
<div id="ontop"></div>
<div id="header"></div>
<div id="sideRight"></div>
<div id="center"></div>
<div id="sideLeft"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
#container{
width:1000px;
height: 600px;
background-color: red;
margin: 0 auto;
}
#ontop{
width: 200px;
height: 200px;
background-color: purple;
position:absolute;
top:20px;
right:20px;
opacity:0.5;
}
#header{
width: 94%;
height: 10%;
background-color: blue;
float: right;
margin-top:3%;
margin-right: 3%;
}
#sideRight{
width: 15%;
height: 60%;
background-color: yellow;
float: right;
margin-top:3%;
margin-right: 3%;
}
#center{
width: 58%;
height: 60%;
background-color: green;
float: right;
margin-top:3%;
margin-right: 3%;
}
#sideLeft{
width: 15%;
height: 60%;
background-color: yellow;
float: right;
margin-top:3%;
margin-right: 3%;
}
#footer{
width: 94%;
height: 10%;
background-color: blue;
float: right;
margin-top:3%;
margin-right: 3%;
}
I want to position div with "ontop" id in 20px from right and 20px from top of "container" div and be on top of other div.in my code position of "ontop" div ,related to screen not "container" div.
If you want it to be relative to the parent element, all you would have to do is add position: relative to the parent element. It is otherwise assumed to be absolutely positioned relative to the next relatively positioned parent element. Since there were none, it was relative to the window.
Example Here
#container {
width:1000px;
height: 600px;
background-color: red;
margin: 0 auto;
position: relative; /* Added .. */
}
Hello my question is about aligning divs. On a website i am working on for fun i have a div and inside that div is a child div. i need the child to be in the middle of the adult div. The left and right are aligning in the middle but it is stuck to the top. If anyone could help me that would be greatly appreciated!
JSFIDDLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title></title>
</head>
<body>
<div id="container">
<div id="logo">
</div>
<div id="nav">
</div>
<div id="content-background">
<div id="content">
</div>
</div>
<div id="faqs">
</div>
<div id="footer">
<div id="footer-right">
</div>
<div id="footer-left">
</div>
<div id="footer-bot">
</div>
</div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 25%;
height: 50px;
float: left;
background-color: red;
}
#nav {
width: 75%;
height: 50px;
float: left;
background-color: green;
}
#content-background {
width: 100%;
height: 600px;
clear: both;
background-image: url('images/background.jpg');
}
#content {
width: 50%;
height: 300px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#faqs {
width: 100%;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
#footer {
width: 100%;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#footer-right {
width: 50%;
height: 150px;
float: left;
background-color: blue;
}
#footer-left {
width: 50%;
height: 150px;
float: left;
background-color: pink;
}
#footer-bot {
width: 100%;
height: 50px;
clear: both;
background-color: green;
}
It seems you want to align the div vertically to the middle as well as horizontally. The child div looks good horizontally, but aligning to the center vertically is a bit trickier.
An easy solution since you know the height of #content-background would be to position #content relative to the parent and then move it down by 150 pixels.
#content {
...
position: relative;
top: 150px;
}
Here's a working fiddle http://jsfiddle.net/ry5xU/3/
Here's a really good breakdown of how you can accomplish true vertical centering:
How to vertically center divs?
You can use margin:auto to show a div at center.
Check out this and this or this might help.
#main_div {position:relative;}
#child_div {position:absolute; right:50%; margin-right:-200px; top:50%; margin-top:-200px;}
you should do this for your css.
when the width and height of your child div is 400px , in "margin-right" or "margin-top" you write -200px on them . It means the half of width with a Minus behind that should be in "margin-right" and the half of height with a Minus behind that should be in "margin-top".
Good luck .
Basicly if you look at http://drugraid.3owl.com you can see they have a banner and when you resize the webpage the middle column stays cenetered at all times while the side banners slowly creep in to the center. Here is the code i have so far. It would be great if someone helped me.
<!--HTML CODE-->
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Testing layouts</title>
</head>
<body>
<div id="wrapper">
<div id="left">1 TEST</div>
<div id="middle">2 TEST</div>
<div id="right">3 TEST</div>
</div>
</body>
</html>
CSS CODE
body {
margin: 0px;
}
#wrapper {
height: 35px;
padding-top: 2px;
padding-left: 2px;
padding-right: 2px;
min-width: 900px;
}
#left {
background-color: #ADA5A1;
height: 35px;
width: 16%;
float: left;
}
#middle {
background-color: #7D726D;
height: 35px;
width: 68%;
float: left;
}
#right {
background-color: #ADA5A1;
height: 35px;
width: 16%;
float: left;
}
ALSO if you have time u can try to make it work with... the margin of 2px so the boxes have spacing of 2px; next to each other
try just one container centered
http://codepen.io/gcyrillus/pen/IdrGa
#maincontainer {
min-height:100%;
width:60%;
min-width:600px;
margin:auto;
}