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>
Related
This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I am quite new to CSS and HTML so I am having trouble with aligning two divs next to each other.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>cards</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
<body>
<div id="card_container">
<div id="card_image_container">
<img src="https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png"/>
</div>
<div id="card_content_container">
<div id="card_content_title">
<h1>ADVERT</h1>
<h2>EXAMPLE
</div>
<div id="card_content_text">
<p>
<b>Heading</b><br/>
Info
</p>
<p>
<b>Heading 2</b><br/>
Info 2
</p>
</div>
<div id="card_content_actions">
</div>
</div>
</div>
</body>
</html>
and this is my CSS:
*{
padding: 0px;
margin: 0px;
}
#card_container{
margin-left: auto;
margin-right: auto;
width: 36%;
margin-top: 10%;
border: 1px solid grey;
}
#card_container > div{
display: inline-block;
}
#card_image_container{
width: 40%;
background-color: green;
}
#card_image_container img{
vertical-align: bottom;
width: 100%;
height: 100%;
}
#card_content_container{
vertical-align: top;
background-color: red;
width: 59%;
}
And this is the problem I have:
white spaces around div
As you can see - my div has white spaces around it, I know this is due to 1% of width left over but if I change my:
#card_content_container{
vertical-align: top;
background-color: red;
width: 59%;
}
width to 60%, the content_container gets moved to next line.
I need card_content_container to fill the remaining 60% so it's aligned perfectly.
Here is js fiddle:
https://jsfiddle.net/gbcdp2on/
Your issue is the white space between inline-block elements
Set the 59% to 60% and then update your markup to not include a space between the inline-bock elements
<div id="card_image_container">
...
</div><div id="card_content_container">
....
</div>
CSS
#card_content_container{
width: 60%;
}
the reason the space is there when you set 60% width is because your element are inline-block, so the white space counts as a space. There are other ways to write the html if you want it to be easier to read
for example using a comment in between
<div id="card_image_container">
...
</div><!--
--><div id="card_content_container">
....
</div>
There are many ways to achieve what you want but your particular issue is the space between inline-block elements
Inline elements are sensitive to the white space in your code -- so just remove the white space. In your case you need to remove it between your two divs so like </div><div id="card_content_container">
jsFiddle example
Another option would be to float the div on the left:
#card_image_container {
width: 40%;
background-color: green;
float:left;
}
jsFiddle example
You can use flexbox
#card_container {
display: flex;
margin-left: auto;
margin-right: auto;
width: 36%;
margin-top: 10%;
border: 1px solid grey;
}
#card_image_container{
flex: 4;
background-color: green;
}
#card_content_container{
flex: 6;
vertical-align: top;
background-color: red;
}
https://jsfiddle.net/2sq6gu79/
Try wrapping your parent container with display:flex
*{
padding: 0px;
margin: 0px;
}
#card_container{
display:flex;
margin-left: auto;
margin-right: auto;
width: 70%;
margin-top: 10%;
border: 1px solid grey;
}
#card_image_container{
width: 40%;
background-color: green;
}
#card_image_container img{
width: 100%;
height: 100%;
}
#card_content_container{
background-color: red;
width: 60%;
}
<div id="card_container">
<div id="card_image_container">
<img src="https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png"/>
</div>
<div id="card_content_container">
<div id="card_content_title">
<h1>ADVERT</h1>
<h2>EXAMPLE
</div>
<div id="card_content_text">
<p>
<b>Heading</b><br/>
Info
</p>
<p>
<b>Heading 2</b><br/>
Info 2
</p>
</div>
<div id="card_content_actions">
</div>
</div>
</div>
You can achieve this using flexbox.
*{
padding: 0px;
margin: 0px;
}
#card_container{
display: flex;
margin: auto;
width: 36%;
margin-top: 10%;
border: 1px solid grey;
}
#card_image_container{
width: 40%;
background-color: green;
}
#card_image_container img{
vertical-align: bottom;
width: 100%;
height: 100%;
}
#card_content_container{
vertical-align: top;
background-color: red;
width: 60%;
}
Basically, when I try to add a paragraph into one of the <div>'s I run into trouble. The page seems to be messed up. Is there anything wrong with my code? And, what are some things that my code needs to be improved?
Thanks!
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
}
body {
background-color: white;
}
#content {
width: 60%;
height: 1500px;
margin: auto;
}
#header {
height: 200px;
border: 1px dashed;
background-color: #44424D;
}
#left {
width: 20%;
height: 100%;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
left: 676px;
}
#name {
font-family: big john;
font-size: 50px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid;
color: white;
}
.wot {
background-color: #E6C88C;
}
</style>
<head><title>Film Club</title></head>
<body>
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left", class="wot">
<p>Test</p>
</div>
<div id="right", class="wot">
</div>
</div>
</body>
</html>
First of all, you have commas in your HTML, which is incorrect.
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left" class="wot">
<p>Test</p>
</div>
<div id="right" class="wot">
</div>
</div>
Second, the heights of the divs with the text in is set to 100% and the height of you #content div set to 1500px so the divs expand to this full height. The height of a div is only applied when it contains content which is why it changes when you put text in. You can remove the height from the CSS, or set it to a more appropriate value.
Two of your <div>s have commas separating the properties. Properties in html tags do not need to be separated by commas. They should just be separated by a space (this probably isn't even required, but you should do it in the interest of good style).
I'm going to assume the improper indentation is a result of posting the code, but if that's not the case, proper indentation is always a good way to improve your code.
I have change the following CSS code css
#left {
width: 20%;
height: 100%;
float:left;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
float: right;
}
<!DOCTYPE HTML>
<html>
<style>
* {
font-family: georgia;
}
body {
background-color: white;
}
#content {
width: 60%;
height: 1500px;
margin: auto;
}
#header {
height: 200px;
border: 1px dashed;
background-color: #44424D;
}
#left {
width: 20%;
height: 100%;
float:left;
display: inline-block;
}
#right {
height: 100%;
width: 20%;
display: inline-block;
position: relative;
float: right;
}
#name {
font-family: big john;
font-size: 50px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid;
color: white;
}
.wot {
background-color: #E6C88C;
}
</style>
<head><title>Film Club</title></head>
<body>
<div id="content">
<div id="header">
<h1 id="name">The Film Club</h1>
</div>
<div id="left", class="wot">
<p>Test</p>
</div>
<div id="right", class="wot">
</div>
</div>
</body>
</html>
<!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;
}
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 .
See attached image. How is this accomplished? Gosh, I've been going CSS for 8 years but somehow never had to do this!
Thanks!
This is how I do it:
<style>
#container { margin-left: 250px; }
#sidebar {
display: inline; /* Fixes IE double-margin bug. */
float: left;
margin-left: -250px;
width: 250px;
}
/* Definitions for example only: */
#sidebar { background: #FF0000; }
#content { background: #EEEEEE; }
#sidebar, #content { height: 300px; }
</style>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
Example here
I had this implemented on my site a while back, but I lost the code. Here's a quick CSS mockup:
The HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="left">
Mr. Fixed-width left
</div>
<div id="right">
Mr. Dynamic right. Scroll me!
</div>
</body>
</html>
And here's the CSS:
body
{
padding-left: 230px;
}
#left
{
position: fixed;
height: 100%;
left: 0px;
top: 0px;
width: 200px;
background-color: rgb(150, 150, 150);
border-right: 5px solid rgb(50, 50, 50);
padding: 10px;
}
#right
{
width: 100%;
height: 10000px;
}
This should work, and here's a live copy: http://jsfiddle.net/dDZvR/12/.
Note that whenever you add padding, borders, margins, etc. to the left bar, you have to increase the padding on the body. It'll save you a ton of debugging ;)
Good luck!
This new approach doesn't break the layout as the content box (right) organically grows. Also it allows to safely apply backgrounds and borders to the container box.
.container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.left {
position: absolute;
width: 80px;
height: 100%;
}
.right {
position: relative;
left: 80px;
top: 0;
margin-right: 100px;
height: 100%;
}
See demo.
You can always use table display layouts (sigh).
.container {
width: 100%;
display: table;
}
.container div {
display: table-cell;
}
.sidebar {
width: 200px;
background: gray;
}
<div class="container">
<div class="sidebar">fixed width sidebar</div>
<div>dynamic content</div>
</div>
This is the most straight forward solution I could think of.
Wrap both elements in a parent div set to relative positioning, then absolutely position the static side bar and set a margin on the responsive div the same width as the static sidebar.
HTML:
<div class="wrapper">
<div class="fixed"></div>
<div class="responsive">xx</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.fixed {
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
.responsive {
margin-left: 250px;
}