I'm having problems with a behavior I have never seen before. I added the code because Stack Overflow is asking me to put it in my post but I would recommend you go on the Codepen to try it for yourself.
HTML:
<html>
<body>
<div class="card">
<div class="name">Testing and Testeronintendo</div>
<div class="star">X</div>
</div>
</body>
</html>
CSS:
body {
width: 200px;
margin: 0;
background: green;
border: 5px solid black;
height: 100vh;
}
.card {
padding: 10px;
max-width: 300px;
background: yellow;
display: flex;
justify-content: space-between;
}
.name {
background: red;
}
Here is an image with a hand drawn example of the behavior I expect/need: https://i.stack.imgur.com/2tWRH.png
Explanation: I don't want the red background to extend all the way to the X, I simply want it to wrap cleanly around the text of the div.
Just add the minimum content of width to your name class. As far as I know by reading your question I understand that you want to make the red background as it's needed.
body {
width: 200px;
margin: 0;
background: green;
border: 5px solid black;
height: 100vh;
}
.card {
padding: 10px;
max-width: 300px;
background: yellow;
display: flex;
justify-content: space-between;
}
.name {
background: red;
width: min-content;
padding: 4px;
}
<html>
<body>
<div class="card">
<div class="name">Testing and Testeronintendo</div>
<div class="star">X</div>
</div>
</body>
</html>
Related
My footer is in fixed position and I am seeing the same view on every device. I also want to fix the LinkedIn logo in white div and orange div above it. So that my website will have same view on every device. but I am not to fix them. Can anyone please help?. I have been trying from last 2 weeks.
I am not able to add my codes here. so attaching the same in screenshot
html code
css code
This how my website currently looks like//i.stack.imgur.com/VNVDN.jpg
This is how I want my website to look like//i.stack.imgur.com/VNVDN.jpg
Actually I made an easy template of what you need. It is pretty simple so I am sure that you will get the point. Please ask me whatever you want.
HTML
<div class="footer-wrapper">
<div class="orange-container">
</div>
<div class="social-container">
<img src="#">
</div>
<div class="black-container">
<p>text text text</p>
<p>text text text</p>
</div>
</div>
CSS
.footer-wrapper {
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: relative;
bottom: 0;
}
.orange-container {
width: 100%;
height: 40px;
background: orange;
}
.social-container {
width:100%;
display: flex;
justify-content: center;
}
.social-container img {
background: red;
width: 30px;
height: 30px;
}
.black-container {
width: 100%;
background: black;
padding-top: 1rem;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
}
.black-container p {
text-align: center;
margin: 0;
}
It is better way to use display:flex or display:grid when you want to center something. Padding is used to make small spaces. Also with the display flex or grid you can easily handle the responsive view of your website pretty easy.
Please I am also advising you to check how to make your questions good Click Here
I hope my answer will be helpful for you, and again if not, don't hesitate to ask anything :)
You can use flexbox. And assign to the main part flex-grow.
* {
padding: 0px;
margin: 0px;
}
.w {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
}
.header {
background: orange;
padding: 5px;
}
.main {
flex-grow: 1;
}
.footer {
background: black;
height: 40px;
text-align: center;
color: white;
padding: 5px;
}
<div class="w">
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
I am not able to find solution to aligning / organizing my div content with Bootstrap. I don't quite understand how it works
aling-items- *
text-*
aling-self- *
justify-items- *
justify-self- *
I am trying to organize my website in the following way:
but I am not able to align the contents so that it is completely joined to the left or right edges or so that the content is left, whether it be img, text or another div in the center of it. I would like to avoid using padding or margins since I am trying to make a responsive content and then they can give me other problems. Thank you very much for your help, greetings.
This may help you to get started:
fiddle to play-around
.MainDiv {
border: 1px solid red;
height: 210px;
width: 100%;
display: flex;
margin: 5px;
}
.First {
border: 1px solid blue;
width: 33%;
height: 200px;
display: flex;
justify-content: flex-start;
margin: 5px;
}
.FirstSubDiv {
border: 1px solid green;
height: 200px;
width: 50%;
}
.Second {
border: 1px solid blue;
width: 33%;
height: 200px;
display: flex;
justify-content: center;
margin: 5px;
}
.SecondSubDiv {
border: 1px solid green;
height: 200px;
width: 50%;
text-align: center;
}
.Third {
border: 1px solid blue;
width: 33%;
height: 200px;
display: flex;
justify-content: flex-end;
margin: 5px;
}
.ThirdSubDiv {
border: 1px solid green;
height: 200px;
width: 50%;
text-align: right;
}
<div class="MainDiv">
<div class="First">
<div class="FirstSubDiv">
contents are in left;
</div>
</div>
<div class="Second">
<div class="SecondSubDiv">
contents are in center;
</div>
</div>
<div class="Third">
<div class="ThirdSubDiv">
contents are in right;
</div>
</div>
</div>
All the information you require is provided here: https://getbootstrap.com/docs/4.5/layout/grid/
In the beginning, you can just copy and paste the boostrap html and tweak it. Gradually you'll get the gist of it (after test and trial) and you'll be able to work on it on your own.
EDIT
https://getbootstrap.com/docs/4.0/utilities/flex/
View the image attached. If that is what you're looking to do, visit this link
I'm starting out an application in angular and really struggling getting a basic layout setup; I have experience with angular but actual html/css design is completely new to me
Nothing I've tried seems to allow this container to take up the entirety of the screen. I have tried using multiple different settings on the html and container css classes and nothing will actually fit the container to the screen with width; but the height always seems to fit properly.
Aside from this flex-direction: row does not seem to consistently work. For example, I am trying to get the div "side" and the div "main" inside of the header div to fit next to each-other. Instead of this, those div's act like columns; despite the fact I have nowrap on; I have also tried display: inline-block and that also does not work. I have decreased the width of side and main in hopes that they would then fit next to eachother and that also does not work.
Screenshot:
Full View
html {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
margin-top: 15px;
border: 1px solid red;
height: 15vh;
flex-direction: row;
flex-wrap: nowrap;
}
.body {
border;
1px solid green;
height: 80vh;
}
.side {
width: 15vw;
border: 1px solid yellow;
}
.main {
width: 50vw;
border: 1px solid blue;
}
<div class="container">
<div class="header">
<div class="side">
<p>HI</p>
<div class="main">
<p>HI2</p>
</div>
</div>
<div class="body">
<p>I am the body</p>
</div>
</div>
</div>
Firstly - there are quite a few typos in your code. You haven't closed the side class or the main class and there is no closing div for the side div.
Secondly - After I'd tidied up your code, I noticed that you were making the .container display: flex; when in fact you needed to make the .header display: flex; as this is the parent of the side and main divs.
This is a great guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This should work for you:
html {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
margin-top: 15px;
border: 1px solid red;
height: 15vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.side {
width: 15vw;
border: 1px solid yellow;
}
.main {
width: 50vw;
border: 1px solid blue;
}
.body {
border: 1px solid green;
height: 80vh;
}
<div class="container">
<div class="header">
<div class="side">
<p>HI</p>
</div>
<div class="main">
<p>HI2</p>
</div>
</div>
<div class="body">
<p>I am the body</p>
</div>
</div>
main is inside side. if you want them to be beside each other, you will need to arrange them as siblings within the flexbox.
you also forgot to add display: flex on the header css.
try this
html {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
margin-top: 15px;
border: 1px solid red;
height: 15vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.body {
border: 1px solid green;
height: 80vh;
}
.side {
width: 15vw;
border: 1px solid yellow;
}
.main {
width: 50vw;
border: 1px solid blue;
}
<div class="container">
<div class="header">
<div class="side">
<p>HI</p>
</div>
<div class="main">
<p>HI2</p>
</div>
</div>
<div class="body">
<p>I am the body</p>
</div>
</div>
I would like to create a container div wrapping another div that scrolls and has an equal margin around all sides. The issue is the margin setting is not being reflected on the right side and the .inner div only scrolls to the end of the width setting.
I have read other posts and found it may be related to the way the width is being set but am unable to get the css quite right for my case.
<!DOCTYPE html>
<html>
<style>
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
}
.inner {
min-width: 2500px;
min-height: 2500px;
margin: 12.5px;
background-color: green;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
I've tried to use padding in .outer and also various width settings including calc(x% - ypx)
I would like to be able to set the width of the container .outer so that it is not 100% of the page.
Any help is much appreciated!
I have just added overflow:inherit in inner div css.
<!DOCTYPE html>
<html>
<style>
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
}
.inner {
min-width: 2500px;
min-height: 2500px;
margin: 12.5px;
background-color: green;
overflow:inherit;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
The inner element has a min-width greater than the available horizontal space provided by the container. I've removed this attribute. Please review the snippet below.
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
width: 85%;
}
.inner {
min-height: 2500px;
margin: 12.5px;
background-color: green;
}
<div class='outer'>
<div class='inner'></div>
</div>
UPDATE
As pointed out by the OP, if a fixed width is used for the inner element, than as you scroll to the right, no right margin is displayed. I did a bit of a trick and faked a right-margin by setting a right-border on the inner element, as follows:
.outer {
height: 400px;
overflow: scroll;
border: 1px solid red;
width: 85%;
}
.inner {
min-width: 800px;
min-height: 360px;
margin: 12px;
background-color: green;
border-right: 12px solid white;
}
<div class='outer'>
<div class='inner'></div>
</div>
Setting .inner to display:inline-block achieves the desired behaviour.
<!DOCTYPE html>
<html>
<style>
body {
display: flex;
align-items: center;
justify-content: space-around;
}
.outer {
height: 600px;
overflow: scroll;
border: 1px solid red;
}
.inner {
display: inline-block;
min-width: 2500px;
min-height: 2500px;
margin: 12.5px;
background-color: green;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
I'm trying to accomplish something very simple. My poor rusty CSS skills do not help one bit.
This is want to achieve:
I cannot make it happen. If I use height: 100% it works when there isn't much text, but when I add a lot of Lorem Ipsum, the content div gets stretched and the left menu div doesn't scale with it.
I don't want to use JavaScript, just clean CSS if it's that's possible.
HTML:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content (paste a lot of lorem ipsum here and menu doesn't stretch)</div>
</body>
</html>
CSS
body
{
margin: 0;
height: 100%;
background-color: gray;
}
#header
{
height: 50px;
background-color: white;
border: 1px solid black;
}
#menu
{
width: 225px;
float: left;
height: calc(100% - 50px);
background-color: white;
border: 1px solid black;
}
#content
{
overflow: auto;
background-color: white;
border: 1px solid black;
}
Flexbox can do that.
Codepen Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
height: 50px;
background: #bada55;
}
section {
display: flex;
flex: 1;
background: #c0ffee;
}
aside {
width: 150px;
background: darkgoldenrod;
}
main {
min-height: 100%;
/*height: 2000px;*/ /* uncomment this to see difference */
background: blue;
flex: 1;
}
<header></header>
<section>
<aside></aside>
<main></main>
</section>
try to give height relative to viewport height. vh
height:100vh;