This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
This should be simple but I just can't figure it out. I have 3 divs displayed as inline block. Whenever I put an svg image (or any image, for that matter - I linked a jpeg and got the same result but I need to have inline svg in this case) inside of one the divs, it causes the other two divs to move down. What could be causing this? Why are the divs no longer on the same baseline?
Resulting behavior
Here is my (simple) code, less the very lengthy svg bit:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headingcontainer">
<div class="div1">1</div>
<div class="div2">
<svg
</svg>
</div>
<div class="div3">3</div>
</div>
</body>
</html>
CSS:
.div1, .div2, .div3 {
width: 150px;
height: 150px;
display: inline-block;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: green;
}
Someone please make me feel like an idiot by pointing out what's going on here. :-)
I think if you add vetical-align: top; to the elements it will work. inline-block elements are vertical-align: baseline; unless otherwise specified.
Example:
.div1,
.div2,
.div3 {
width: 150px;
height: 150px;
display: inline-block;
vertical-align: top;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: green;
}
<div class="headingcontainer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
Just a bit about the default baseline:
Aligns the baseline of the element with the baseline of its parent.
The baseline of some replaced elements, like , is not
specified by the HTML specification, meaning that their behavior with
this keyword may vary between browsers.
Related
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I am trying to make a box like the following in HTML and CSS:
I have the following code:
orders.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Orders Page</title>
<link rel="stylesheet" type="text/css" href="orders.css">
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
orders.css:
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
I want the blue header to align with the top of the box. However, there is a white space between the blue header and the top of my box, as seen in the following image. I am not sure how to make the top of the header align with the top of the box. Any insights are appreciated.
Browsers have default styles that you have to override and the browser you are using is adding a margin to p element.
I recommend you use one of the header tags for your element (more semantic).
<h1 class="order-header">ORDER #10980<h1>
And remove margins
.order-header {
margin: 0;
...
}
You can use font-size to adjust text size and line-height to center the text vertically (you can remove height if you do this).
HTML has some default value like #khan said. Also you can try flex property in css, it will help u a lot when doing some element align operation.
<!DOCTYPE html>
<html>
<head>
<title>Making a box with a coloured header in HTML and CSS</title>
<style type="text/css">
.order-container{
border: 1px solid #999;
height: 200px;
width: 300px;
}
.order-header{
text-align: center;
height: 50px;
background: #81CCD3;
}
.order-header p{
margin:0 ;
}
</style>
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980</p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
Remove the default margin from the p tag. Here's a list of default values.
p {
margin: 0;
}
p {
margin: 0;
}
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
<div class="order-container">
<div class="order-header">
<p>ORDER #10980
<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background-color: red;
display: flex;
padding: 10px;
}
.div2 {
background-color: yellow;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div1">
<img src="smiley.gif">
<div class="div2">
A<br>Smiley<br>Face
</div>
</div>
</body>
</html>
I use the above code to create an outer div with flex display and in it to be an image and another div with a text right to it. Code works but the image seems to strech... How can I make the image keep its original size? Ty
Your image is stretching because the default value of align-self is stretch. You need to change it to center or something else.
align-self: center
See it the doc
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
I'm (hopefully) trying to horizontally align the text in two div boxes , but as you can see below it isn't happening for me . Please help as I can't see what I'm doing wrong
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.left-div {
vertical-align:top;
float: left;
width: 400px;
height: 250px;
}
.right-div {
vertical-align:top;
margin-left: 400px;
}
</style>
</head>
<body>
<div class="left-div">
<H2> Telephone:</H2>
<strong>Mobile: </strong> 123456789<br />
<strong>Office: </strong> 123456789(answer service)<br />
<strong> Email: </strong>pgbathrooms#hotmail.co.uk
</div>
<div class="right-div">
<H2>Address:</H2>
house<br />
town<br />
county<br />
</div>
</body>
</html>
Here's a working Fiddle
The problem you were having was actually the margin-collapse problem, which was manifesting because your h2 has margin-top, and it was being reflected in one div and not the other.
Vertical-align does not work on block-level elements, only inline-block or inline elements.
You could do one of two things:
Remove the margin-top from your h2: div h2 {margin-top: 0;}
You could add padding to the top of the divs to give the margin something to "push off of"
Changing your css as follows takes care of the problem:
.left-div {
float: left;
width: 400px;
height: 250px;
padding-top: 1px;
}
.right-div {
margin-left: 400px;
padding-top: 1px;
}