This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 3 years ago.
I just want to make my button expands full width to its container with some margin to itself, but it's not working. I have tried box-sizing: border-box, but as you can see in the snippet, still no luck because notice the right-side of the button, it's like overshoot..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.cont {
width: 100vw;
background-color: white;
}
.block {
margin: 10px;
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
That is because when the width is already 100%. Adding 10px margin to the left will cause it to be 100% + 10px, therefore overshoots the width of the container. Alternatively, you can add 10px padding to the container instead.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.cont {
width: 100vw;
background-color: white;
padding: 10px; /*Added Padding*/
}
.block {
/*margin: 10px;*/
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
Please remove the following commented CSS and it will work absolutely fine,
* {
box-sizing: border-box;
}
.cont {
/* width: 100vw; */
background-color: white;
width: 100%;
}
.block {
/* margin: 10px; */
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
please try this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.block {
/*margin: 10px;*/
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
Related
When I attempt to alter the browser size, the navigation menu sort of "falls" into itself, if that makes sense. I'm not entirely sure what is causing this.
I've tried max-width and sometimes even adding the ="wrapper" in a div messes this up.
#font-face {
src: url(fonts/Modric.ttf);
font-family: Modric;
}
#font-face {
src: url(fonts/Orkney-Regular.ttf);
font-family: Orkney;
}
#font-face {
src: url(fonts/Made-Bon-Voyage.otf);
font-family: Made-Bon-Voyage;
}
* {
box-sizing: border-box;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 75%;
height: 100px;
margin-right: auto;
margin-left: auto;
}
.navbar a {
float: left;
padding: 40px;
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
width: 25%;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
font-family: Orkney;
}
h1 {
text-align: center;
font-family: Orkney;
}
img {
max-width: 100%;
height: auto;
display: block;
opacity: 50%;
margin-left: auto;
margin-right: auto;
}
#wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
padding-left: 50px;
}
<!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="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
<img src="images/top-image.jpg" alt="plants">
<img src="images/second-image.jpg" alt="benches">
<img src="images/third-image.jpg" alt="cactus">
<img src="images/last-image.jpg" alt="more cactus">
<img src="images/pasetta-studios" alt="pasetta studios">
<code>Designed by Pasetta Studios. Built by Abraham.</code>
</div>
</body>
</html>
As you said in a comment, removing the padding on the links fixed the problem. What happened is that once the element became smaller than 100px (2x50px padding) it stopped getting smaller and wrapped (what you're describing is called wrapping in CSS) to the next line. A padding is redundant anyway since you're centering the text.
I added an overflow: hidden to .navbar to make it wrap around the floated links.
I also added an outline to everything inside body to make the elements easier to see for demonstration/development purposes. This can also be achieved by using the F12 developer tools in your browser.
body * {
outline: 1px solid red;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 75%;
height: 100px;
margin: auto;
overflow: hidden;
}
.navbar a {
float: left;
padding: 40px 0;
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
width: 25%;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
}
#wrapper {
max-width: 1000px;
margin: auto;
padding: 0 50px;
}
<!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="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
</div>
</body>
</html>
If you're learning, this is a great start if not a tiny bit outdated. Most people would use a flexbox nowadays which looks like this:
body * {
outline: 1px solid red;
}
body {
background-color: #262c2c;
}
.navbar {
margin: auto;
max-width: 75%;
/* Added: */
display: flex;
}
.navbar a {
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
/* Added: */
line-height: 100px; /* Effectively centers the text vertically. */
flex: 1; /* Tells the links to expand horizontally. */
}
#wrapper {
max-width: 1000px;
margin: auto;
padding: 0 50px;
}
<!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="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
</div>
</body>
</html>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
So I'm trying to build a basic layout for my site and I've run into a problem. The problem is some margins that I can't figure out where they're coming from.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.png" type="image/png">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="main">
<p>main</p>
</div>
</div>
</body>
</html>
style.css:
/* set defaults */
html, body, div {
background-color: white; /* Was #eee or #ccc */
/*font-size: 16px;*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: white;
font-family: 'PT Serif', serif;
/*font-family: 'Noto Serif', serif;*/
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1200px;
height: auto;
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.main {
width: 80%;
height: 100px;
color: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: black;
display: inline-block;
}
.sidebar {
width: 20%;
height: 100px;
color: black;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: lightgrey;
display: inline-block;
}
p {
margin: 0;
padding: 0;
}
So when I render the page as shown I get:
But when I set the width on the sidebar to 19% I get:
As you can see I'm getting some margins to the right of both elements. I have no idea where this is coming from and the inspector is telling me I have no margins! Margin, padding, border and outline are all set to zero so I have no idea where this is coming from. Is there something I'm missing?
Edit: I should have said I'm trying to get the elements to display next to each other without wrapping.
Reason for this beacuse inline elements respect the word spacing between divs in the html. The space between first and second create an actual gap that you can see on the page.
You can easily remove this by removing the space between inline divs in the html.
div {
display: inline-block;
width: 50%;
}
<div style="background: green">Width: 50%</div><div style="background: red">Width: 50%</div>
But I hope this is not you are expecting, do not worry there are some otherways as well :)
font-size: 0;
gap between the two divs is due to word spacing therefore adding font-size: 0 to the parent container will remove the gap between the two divs.
.wrapper {
width: 100%;
font-size: 0
}
div {
display: inline-block;
width: 50%;
}
<div class='wrapper'>
<div style="background: green; font-size: 14px" class="sidebar">Width 50%</div>
<div style="background: red; font-size: 14px" class="main">Width 50% </div>
</div>
display: flex this method only suppport IE > 10 versions, you can apply display: flex to the parent container and apply relavent widths accordingly to child divs.
.wrapper {
display: flex;
}
.main {
width: 80%
}
.sidebar {
width: 20%
}
<div class='wrapper'>
<div style="background: green" class="sidebar">Width 20%</div>
<div style="background: red" class="main">Width 80% </div>
</div>
Actually here you are not getting the margin issue when you have two elements that has width:19% and width:80%, the remaining width:1% gets the gap that you mentioned as margin.
Simply set float:left; to both sidebar and main classes that avoid the margin issue. No need to change the width.
html,
body,
div {
background-color: white;
/* Was #eee or #ccc */
/*font-size: 16px;*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: white;
font-family: 'PT Serif', serif;
/*font-family: 'Noto Serif', serif;*/
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1200px;
height: auto;
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.main {
width: 80%;
height: 100px;
color: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: black;
display: inline-block;
float: left;
}
.sidebar {
width: 20%;
height: 100px;
color: black;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: lightgrey;
display: inline-block;
float: left;
}
p {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.png" type="image/png">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="main">
<p>main</p>
</div>
</div>
</body>
</html>
You have forgot to add the float. Please add the following css to your css so that it wont take margin
.sidebar, .main{ float:left; }
if you usnig float:left instead of display: inline-block; your margin will remove
I want to the two span center in the div but i'm failed,how to fix it? Code as below don't effective but when i put a div out of the two span it become effective while display property change to inline-block, how could this happen?
body{
margin: 0;
padding: 0;
}
.topbar{
border: 1px solid;
max-width: 800px;
height: 20px;
}
.inner1{
float: left;
border: 1px solid red;
}
.inner2{
float: left;
border: 1px solid red;
}
.clearfix::after{
content: "";
clear: both;
display: block;
}
.topbar{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>
You have float: left in your inner1 and inner2 classes and they move the spans into left. Just removing them works fine. Below is the updated code.
body{
margin: 0;
padding: 0;
}
.topbar{
border: 1px solid;
max-width: 800px;
height: 20px;
}
.inner1{
border: 1px solid red;
}
.inner2{
border: 1px solid red;
}
.clearfix::after{
content: "";
clear: both;
display: block;
}
.topbar{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>
You can't center it because of float: left; on both spans. Just remove the float: left; and it will go to center.
You say it works when you wrap the spans inside a div with display inline-block. That is because that div will go to center since it doesn't have float: left, and then the spans will float: left inside the centered div. Hope you got it :)
Another approach could be just using the flexbox model. It's easier and code is short too.
body {
margin: 0;
padding: 0;
}
.topbar {
border: 1px solid;
max-width: 800px;
height: 20px;
display: flex;
justify-content: center;
}
.topbar span {
border: 1px solid green;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="topbar ">
<span class="inner1">register</span>
<span class="inner2">login</span>
</div>
</body>
</html>
PS: Also to make the code shorter, instead of using inner1 and inner2, I used .topbar span in css since both share the same property.
I'm learning css and html and i have this problem, where the margin-left and margin-right in the ".logo" div class don't want to center the div. Please help because i done reserch, i checked the code and everything looks good, so I have no idea whats going on.
body
{
background-color: #303030;
color: #ffffff;
}
.wrapper
{
width:100%;
}
.header
{
width:100px;
padding:40px 0;
}
.logo
{
width:450px;
font-size:48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>site</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
LOGO
</div>
</div>
</div>
</body>
</html>
Your header is only 100px while your logo is 450px, you can check this fiddle for demo.
.wrapper {
width: 100%;
}
.header {
width: 1000px;
padding: 40px 0;
}
.logo {
width: 450px;
font-size: 48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I've tried for a while to understand why this code doesn't works as expected.
The following code should display a white stripe, green stripe, white stripe, without gap.
There's three divs inside a container, all 2 div are 20% width, one is 60% width, border, padding, margin is 0.
The question is why do I still see a "margin", between white and green block?
if you wanna give a try
https://jsbin.com/lexekimoba/edit?html,css,output
* {
margin: 0;
padding: 0;
border: 0px solid red;
}
body {
background-color: #888;
}
.container1 {
background-color: #aaa;
}
.main {
width: 60%;
background-color: green;
display: inline-block;
box-sizing: border-box;
}
.side {
box-sizing: border-box;
width: 20%;
display: inline-block;
background-color: white;
}
<div class="container1">
<div class="side">s</div>
<div class="main">
abcdef
</div>
<div class="side">s</div>
</div>
White space between two inline divs are considerable and visible.
Try removing all white spaces between inline divs.
For better explanation read this great article by css-tricks
Fighting the Space Between Inline Block Elements
Here's the deal: a series of inline-block elements formatted like you
normally format HTML will have spaces in between them.
Also, you may want to read Remove Whitespace Between Inline-Block Elements
It's due to the linebreaks between the DIVs (in the HTML code). If you remove those, it works:
* {
margin: 0;
padding: 0;
border: 0px solid red;
}
body {
background-color: #888;
}
.container1 {
background-color: #aaa;
}
.main {
width: 60%;
background-color: green;
display: inline-block;
box-sizing: border-box;
}
.side {
box-sizing: border-box;
width: 20%;
display: inline-block;
background-color: white;
}
<div class="container1">
<div class="side">s</div><div class="main">
abcdef
</div><div class="side">s</div>
</div>
Remove the white space between the divs
*{
margin: 0;
padding: 0;
border: 0px solid red;
}
body{
background-color: #888;
}
.container1{
background-color: #aaa;
}
.main{
width: 60%;
background-color: green;
display: inline-block;
box-sizing: border-box;
}
.side{
box-sizing: border-box;
width: 20%;
display: inline-block;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>div align</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="divalign.css">
</head>
<body>
<div class="container1">
<div class="side">s</div><div class="main">
abcdef
</div><div class="side">s</div>
</div>
</body>
</html>
or use <!-- --> between the inline block elements.
*{
margin: 0;
padding: 0;
border: 0px solid red;
}
body{
background-color: #888;
}
.container1{
background-color: #aaa;
}
.main{
width: 60%;
background-color: green;
display: inline-block;
box-sizing: border-box;
}
.side{
box-sizing: border-box;
width: 20%;
display: inline-block;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>div align</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="divalign.css">
</head>
<body>
<div class="container1">
<div class="side">s</div><!--
--><div class="main">
abcdef
</div><!--
--><div class="side">s</div><!--
--></div>
</body>
</html>
You can read more about it here