Consider the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<style>
button {
display: block;
margin: 10px;
}
</style>
</head>
<body>
<div style="width: 100px; border: 1px solid black">
<button>hello</button>
<button>hi</button>
</div>
</body>
</html>
My question is why buttons don't stretch to 100% width if their display is block. How to achieve this? I can't set style of buttons to width: 100% because they would overflow their parent block because of the margin.
The initial defination of Button Layout was committed on 2019, which solved the rendering problem of button elements. https://github.com/whatwg/html/pull/4143.
we could refer to the HTML Living Standard to see an important rule of Button Layout as follows:
If the computed value of 'inline-size' is 'auto', then the used value is the fit-content inline size.
https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
we should know that a block with inline-size:fit-content | max-content | min-content will shrink its width even if display:block.(by the way, width:fit-content | max-content | min-content does the same effect)
try this (require chrome 57+, but in FireFox 66+ we could try with inline-size:max-content):
<div style="
inline-size: fit-content;
background: linear-gradient(0deg, #ddd, #fff);
padding: 2px 6px;
border: 0.5px solid #bbb;
font-size: 13px;"
>click me!</div>
view result
You can add padding to div container, and remove horizontal margin from buttons. Then you can apply width 100% to them:
<!DOCTYPE>
<html>
<head>
<title>TEST</title>
<style>
button {
display: block;
width:100%;
margin: 10px 0;
}
</style>
</head>
<body>
<div style="width: 100px; border: 1px solid black; padding:0 10px;">
<button>hello</button>
<button>hi</button>
</div>
</body>
</html>
Demo: http://jsfiddle.net/xwt9T/1/
Try with this ,
<div style="width: 100px; border: 1px solid black">
<button style="width:100%; float: left;margin-left:0px;">hello</button>
<button>hi</button>
</div>
flex-grow: 1 will produce the expected behavior.
Related
I want to hide a div outside the screen but the screen size changes when I try.
For example:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px;">
<div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
<div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>
When I tried this code
I don't want the slider to appear.
Using css overflow: hidden property in the body tag, you can get rid from that slider easily. I have attached the code below, run explore. However you can explore more about overflow property. Read the article I have linked below to explore clearly.
W3 School - css overflow
<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px; overflow: hidden">
<div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
<div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>
This question already has answers here:
Why top margin of html element is ignored after floated element?
(10 answers)
Closed 2 years ago.
So I applied clear:left to a div and tried changing its top margin but it did not affect anything. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div1 {
border: 2px solid black;
float: left;
}
.div2 {
clear: left;
border: 2px solid red;
width: 120px;
height: 120px;
margin-top: 320px; /* Why is margin not working?*/
}
</style>
</head>
<body>
<div class="div1">This is suppose to be a first div</div>
<div class="div2">Div2</div>
</body>
</html>
Here is the result :
Now the problem is that the result is same even if I add or remove the top margin. It would be great if you can show me the right answer and also explain why this is happening.
Use of one container like this :
<div class="con" style="overflow: hidden">
<div class="div1">This is suppose to be a first div</div>
</div>
.div1 {
border: 2px solid black;
float: left;
}
.div2 {
border: 2px solid red;
width: 120px;
height: 120px;
margin-top: 100px;
}
<div class="con" style="overflow: hidden">
<div class="div1">This is suppose to be a first div</div>
</div>
<div class="div2">Div2</div>
I need 2 div with one is floated left so when we resize the window into a small window the second div will move downward.
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
this code will make the second div overlap with the first div, if I add display:flex in the container it won't overlap anymore but the div size is resizing with the windows size and the second div won't go downward.
What is wrong? I need my div to be exactly 500px.
Thanks :)
From what I understand, you want to make the second div go down after resizing the browser. So you can use media queries for that:
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div:first-child {
float: left;
width: 500px;
height: 500px;
border: 1px solid red;
}
.container div:last-child {
width: 500px;
height: 500px;
border: 1px solid black;
}
#media (max-width: 500px) {
.container div:last-child {
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div>
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
I separated the style of the two divs, and removed the float:left from the inline style. The <meta> is also important for the media query to work. I used clear:both to clear the float of the first div from the second, thus not affecting the second div.
I didn't put this in a snippet because the media does not seem to work there, but is working in my computer
You have to set float in second div also. Or in media query you have to set the display: block in both div. check updated snippet below..
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div style="float: right">
bbb
</div>
</div>
</body>
</html>
So I am trying to make a simple border for a site, in css:
html{
border-top:3em solid #26282B;
}
I would like to have some white text on top of it, how can I do this? I tried making a class, but it always appears under the border.
You CAN NOT make any text in the border. Use div or something.
Here is the example:
<html>
<head>
<style>
body{margin:0;padding:0;}
.someclass {
width:100%;
height:3em;
background-color:#26282B;
color:white;
}
</style>
</head>
<body>
<div class='someclass'>
Sometext Here
</div>
</body>
</html>
You can put your text in a span or div set a class name and using left, top, right, bottom, fix the position like this:
e.g class="example"
.example {
position:absolute;
left: 5px;
top: 50px;
}
Elsewhere this probably help you:http://www.w3schools.com/tags/tag_legend.asp
You can't write something on top of a border - technically yes, but for all purposes here, no, you can't.
So if you want a text on top a short dark background you write something like that:
In yo HTML:
<div>My suppa text</div>
In yo CSS:
div {
background: #26282B;
color: #fff;
}
<div> here being the first element inside your <body> it still would have a margin before it, that's because of the browser default style.
You can get rid of it by doing that, in yo CSS:
html, body {
margin-top: 0;
padding-top: 0;
}
Now I would suggest you to read about CSS resets.
Yes, you can.
Add this to your style:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
How about this:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
border: 10px solid;
padding: 5px;
}
#title {
float: left;
padding: 0 5px;
margin: -20px 0 0 30px;
background: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="title">Border title</div>
<p>Some content...</p>
</div>
</body>
</html>
I am trying to make a simplistic layout for my website.
I want this navigation bar to fill the screen horizontally but the page content to be centered.
I have managed to achieve this, but it breaks when the content gets bigger than its predefined width.
I have only a few pages where reports and tables push the design wider than its default so would like these pages to expand nicely.
Currently the moment my content gets to wide, it hugs the left of its container but pushes the right margin out.
I would like this to push the left and right margins out equally and remain in the center.
How can I achieve this? Here is my current html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;}
#main{width: 100%; margin: auto auto;min-height:100%;}
#header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');}
#nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;}
#content{width: 740px;position:relative;margin: auto auto; padding-top: 10px;}
#footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;}
</style>
</head>
<body>
<div id="main">
<div id="header">LOGO</div>
<div id="nav">LINK | LINK | LINK</div>
<div id="content">
here is some contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</div>
<div id="footer">footer content</div>
</div>
</body>
</html>
I have simulated the content getting wider by making a really really long word.
In my site this would typically be a report in an HTML table.
Any help will be greatly appreciated. Thanks!
edit:
this isn't just about text which can be wrapped or broken.
Consider replacing the "contentcontentcontent" above with a table that is wider than its parent div:
<table border="1" width="800px"><tr><td>here is some content</td></tr></table>
This table now touches the left border of the content div, but pushes out the right border of the content div. I want it to push out both borders equally and remain in the center
Here's how to do it (Scroll to MidiMagic's post): http://www.daniweb.com/forums/thread57605.html
You need to wrap words in div#content.
You can use something like this:
div#content {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
Someone who is not a member on this site managed to solve this problem for me.
What we did is set the content div to 100%, then place a div inside this surrounding the content with align="center"
<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>
The entire solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;}
#main{width: 100%; margin: auto auto;min-height:100%;}
#header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');}
#nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;}
#content{width: 100%;position:relative;margin: auto auto; padding-top: 10px;border: solid 1px;}
#footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;}
</style>
</head>
<body>
<div id="main">
<div id="header"><br/>LOGO<br/></div>
<div id="nav">LINK | LINK | LINK</div>
<div id="content">
<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>
</div>
<div id="footer">footer content</div>
</div>
</body>