<!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;
}
Related
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 7 years ago.
I was attempting to style divs with display: inline-block;, but there was space between my divs so I changed everything to font-size: 0px; and it removed the space. Now when I try to write in the divs, it moves the parent around. Is there a way to not use position to style the divs, but keep them in place when I add a child element with text?
<!DOCTYPE html>
<html>
<head>
<title>Bummer</title>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
font-size: 0px;
}
#one {
display: inline-block;
height: 50%;
width: 70%;
background-color: red;
}
#ySpan {
display: inline-block;
font-size: 12px;
}
#two {
display: inline-block;
height: 50%;
width: 30%;
background-color: blue;
}
#three {
display: inline-block;
height: 50%;
width: 60%;
background-color: green;
}
</style>
</head>
<body>
<div id="one">
<span id="span">Text</span>
</div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
If I were not to look at what you are trying to achieve, the answer to your question would be to add a font-size > 0 to everything but the body.
Demo fiddle
Though if I were judging your entire approach, I'd strongly advise against slapping font-size: 0px to the body (or any other element) and look at better solutions, like float: left
As demonstrated here
Or, if the browser requirements let you, catch up on using flex layout
Maybe I don't understand what you're trying to do but is this what you were trying to do?
<!DOCTYPE html>
<html>
<head>
<title>Bummer</title>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
font-size: 15px;
}
#one, #two, #three {
float: left;
}
#one {
height: 50%;
width: 70%;
background-color: red;
}
#ySpan {
display: inline-block;
font-size: 12px;
}
#two {
height: 50%;
width: 30%;
background-color: blue;
}
#three {
height: 50%;
width: 60%;
background-color: green;
}
</style>
</head>
<body>
<div id="one">
<span id="span">Text</span>
</div>
<div id="two">werwer</div>
<div id="three">dfg dfgdfgdfgdfg</div>
</body>
</html>
I'm having some trouble floating some elements. I've reproduced an example here.
Basically I want Logout to appear on the right (just like the image appears on the left), but am having trouble doing so.
If you swap float: right with float: left and vice-versa in .logo and user-header, Logout still appears on the new row while the logo will correctly float right.
I feel I am missing something obvious here.
Any ideas?
Thanks.
http://jsfiddle.net/xVXPk/15/
Try this. ( always do float:right, float:left, center, clear:both ) -- note close your image tags.
<div id="header">
<div class="user-header">
<label class="user"></label>
<a class="" href="#">Logout</a>
</div>
<div class="logo">
<img src="#"/>
</div>
<div class="company-header">
<a title="title" href="index.php"><b>Hello</b></a>
</div>
<div style="clear:both; height:1px; width:99%" ></div>
</div>
#header {
width: 600px;
background-color: #585D63;
padding: 15px 0px;
}
#header .logo {
float: left;
margin-left: 30px;
}
#header .logo img {
height: auto;
}
#header .company-header {
font-size: 150%;
letter-spacing: 1px;
text-align: center;
width: 200px;
margin: 0 auto;
}
#header .user-header {
float: right;
margin-right: 30px;
}
#header .user-header a {
max-width: 120px;
height: auto;
}
duplicate of this post:
How to align 3 divs (left/center/right) inside another div?
To explain, as far as I understand the issue, when the browser draws the page, it will render the center content, first as it process the page in logical order. then apply the floats this is why the right hangs. But by adding the floats first the browser will know before rendering the center to float the content to the right, because it goes , left center right in the first case, and in the second right left center. If that makes sense. Sort of order of processing operations.
You simply haven't done the math right. There is not enough space for the div class="user-header" to be positioned on the RH-side. See the JSFiddle with borders.
EDIT: and you need to float:left the div class="company-header" as well: live demo.
Used code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live demo</title>
<style>
div {
border: 1px solid black; /* added */
}
#header {
width: 600px;
height: 60px; /* added */
background-color: #585D63;
padding: 15px 0px;
}
#header .logo {
float: left;
width: 33%;
max-width: 180px;
padding: 5px 30px;
}
#header .logo img {
max-width: 120px;
height: auto;
}
#header .company-header {
font-size: 150%;
letter-spacing: 1px;
margin: 0 auto;
width: 33%;
text-align: center;
float: left; /* added */
}
#header .user-header {
float: right;
w/idth: 33%; /* de-activated */
max-width: 180px;
padding: 5px 30px;
}
#header .user-header a {
max-width: 120px;
height: auto;
}
</style>
</head>
<body>
<div id="header">
<div class="logo">
<img src="#">
</div>
<div class="company-header">
<a title="title" href="index.php">
<b>Hello</b>
</a>
</div>
<div class="user-header">
<label class="user"></label>
<a class="" href="#">Logout</a>
</div>
</div>
</body>
</html>
Add class to anchor: <a class="logout" href="#">Logout</a>
css:
#header {
position: relative;
}
.logout {
line-height: 58px; /* Same height as #header */
position: absolute;
top: 0;
right: 30px; /* Same padding-left of logo */
}
DEMO
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;
}
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.