This question already has answers here:
Setting the width of inline elements
(7 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
How to make an element width: 100% minus padding?
(15 answers)
Closed 2 years ago.
How do i exactly use the parent's element width in css? I know this is a basic question but i'm using width: 50% on css expecting that the width would be 50% of the parent but instead it uses less than 50%.
In this example, i colored the parent as green so i could see the width and i was expecting each tab to be distributed along the green block.
Link to the example: https://jsfiddle.net/zfw81ojq/6/
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BPO Services</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content" id="main-content" onclick="appendEl()">
<div class="tab-selector">
<div class="tablinks" onclick="openForm()"><h2>1st Tab</h2></div>
<div class="tablinks" onclick="openForm()"><h2>2nd Tab</h2></div>
</div>
</div>
</body>
</html>
.content {
position: absolute;
width: 60%;
padding: 120px auto 120px;
top: 30%;
margin-left: 20%;
}
.content .tab-selector {
height: 25px;
background-color: green;
}
.content .tab-selector .tablinks {
display: inline;
padding: 20px;
width: 50%;
text-align: center;
}
.content .tab-selector .tablinks h2 {
font-size: 20px;
display: inline;
}
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 24 days ago.
I want to my text to be centered both horizontally and vertically within a div.
I'm using the inset property to fill up the entire div with my p tag.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="wrapper">
<div class="zone">
<p>Hello World</p>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: bordered-box;
}
.wrapper {
background: red;
}
.zone {
min-height:10em;
text-align: center;
position: relative;
}
.zone p {
position: absolute;
inset:0;
}
However I don't get it to work. Can anyone give me a hint on how to achive this with the inset property?
If you require the inset property you can do the following, but there are many better ways to center text in a div.
* {
margin: 0;
padding: 0;
box-sizing: bordered-box;
}
.wrapper {
background: red;
}
.zone {
min-height: 10em;
text-align: center;
position: relative;
}
.zone p {
font-size: 20px;
position: absolute;
inset: calc(50% - 10px) 0 0 0; /* The minus value needs to be half the font-size */
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="wrapper">
<div class="zone">
<p>Hello World</p>
</div>
</div>
</body>
</html>
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Removing body margin in CSS
(10 answers)
Full screen width div area
(3 answers)
Div not 100% width of browser
(4 answers)
css 100% width div not taking up full width of parent
(3 answers)
Closed 1 year ago.
<!DOCTYPE html>
<html>
<head>
<title>Functions</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
main body
<div style="background-color: white; width: 100%; height: 80px; padding: 0px; margin: 0px;">
I want to make this div use 100% of width of the screen
</body>
</html>
It's default 8px body margin.
body {margin: 0;}
You'll need to remove any padding and margins that were auto-applied to the <html> and <body> tags by default, something some browsers do. Once you remove that, your element will display full-width:
html, body { margin: 0; padding: 0; }
body { background-color: red; }
div { background-color: #fff; }
<!DOCTYPE html>
<html>
<head>
<title>Functions</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
<div style="background-color: white; width: 100%; height: 80px; padding: 0px; margin: 0px;"></div>
</body>
</html>
You were almost there, just had to remove default margin and padding from the body tag it self and everything else would have fit in.
body {
margin :0;
background-color: red;
}
div {
background-color: white; width: 100%; height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<title>Functions</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>I am div</div>
</body>
</html>
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Percentage Height HTML 5/CSS
(7 answers)
Maintain aspect ratio of div but fill screen width and height in CSS?
(9 answers)
Closed 3 years ago.
I have a layout like this:
body {
color: white;
height: 100%;
width: 100%;
background: red;
}
#interaktiivne-container {
height: 100%;
width: 100%;
overflow: hidden;
background: blue;
}
#interaktiivne-videowrapper:after {
height: 0;
overflow: hidden;
padding-top: 56.25%;
position: relative;
background-color: brown;
}
#interaktiivne-videowrapper>div {
overflow: hidden;
background: black;
}
#interaktiivne-videowrapper>div>video {
top: 0;
width: 100%;
height: 100%;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Interaktiivne</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="interaktiivne-container">
<div id="interaktiivne-videowrapper">
<div>
<video autoplay src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4"></video>
</div>
</div>
</div>
</body>
</html>
And this gives me the desired width for the video. Problem now is, that in some content cases, I want to resize the video element itself to 200%. but this MUST NOT make the container div's expand and the overflow MUST STAY HIDDEN.. the code currently, sadly does do it, overflow is not hidden :( Any ideas?
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 3 years ago.
I am trying to center a image within a container.
According to what I've understood, setting a container's position as "relative" that has a property of text-align set to center should
center block-level elements vertically that has their position
property set to absolute. However, why isn't this the case with my
code?
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Playground</title>
</head>
<body>
<div class="first-container">
<img class="mountain" src="images/mountain.png" alt="">
</div>
<div class="second-container">
</div>
<div class="third-container">
</div>
</body>
</html>
I expected that the mountain image would be at the center of the first container that I set the background color to yellow for ease of distinction.
When you use position: absolute on an image in a container with position: relative, your image is at the center of your container. Or, more specifically, the top-left pixel of your image is as the center.
In order to center the image so that the center of the image is in the center of the containing element, you want to set a margin-left of negative half of the image's width. This can be seen in the following, with an image that's 100px wide, with margin-left: -50px:
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
margin-left: -50px;
}
<div class="first-container">
<img class="mountain" src="https://placehold.it/100" alt="">
</div>
And assuming you set the width on the image itself, you can actually make use of a combination of CSS variables and calc() in order to determine this margin, with width: var(--image-width) and margin-left: calc(var(--image-width) / -2) on the image.
:root {
--image-width: 100px;
}
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
width: var(--image-width);
margin-left: calc(var(--image-width) / -2);
}
<div class="first-container">
<img class="mountain" src="https://placehold.it/100" alt="">
</div>
your code is right but has a little bit bug here, you need to set height property to some pixels then you can see the image. For example:
.first-container {
background-color: yellow;
height: 400px;
position: relative;
text-align: center;
width: 100%;
border: 1px solid black;
}
added
left: 50%;
transform: translateX(-50%);
to .mountain. Hope this helps you. Thanks
.first-container {
background-color: yellow;
height: 100%;
position: relative;
width: 100%;
}
.mountain {
left: 50%;
transform: translateX(-50%);
position: absolute;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Playground</title>
</head>
<body>
<div class="first-container">
<img class="mountain"src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Artesonraju3.jpg" alt="">
</div>
<div class="second-container">
</div>
<div class="third-container">
</div>
</body>
</html>
This question already has answers here:
CSS – why doesn’t percentage height work? [duplicate]
(6 answers)
Closed 5 years ago.
I am having trouble with divs and percentages. I do not understand how to expand or set the divs so it would be the full size of the screen. It is stuck at the top of the browser when I view it. What do I do?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BasicArchitect</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<div id="container">
<div class="header">
</div>
</div>
</body>
</html>
CSS
body{
height:100%;
width:100%;
margin: 0;
padding: 0;
}
#container{
height:90%;
width:100%;
margin:auto;
background-color:white;
border-style: solid;
}
.header{
height:50%;
margin:auto;
background-color: red;
border-style: dashed;
}
Sizing the body to height: 100% doesn't really do anything unless if you set html's height to 100% as well. The measurement you are looking for is Viewport Height, or vh for short.
You want to replace body { height: 100% } with body { height: 100vh }
Aside from percentages, you can use viewport units like vh and vw
body {
margin: 0;
padding: 0;
}
#container {
height: 90vh;
margin: auto;
background-color: white;
border-style: solid;
}
.header {
height: 50vh;
margin: auto;
background-color: red;
border-style: dashed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BasicArchitect</title>
<link rel="stylesheet" type="text/css" href="style.css" </head>
<body>
<div id="container">
<div class="header">
</div>
</div>
</body>
</html>