CSS adds two blocks on one line
I want to create a window like this:
But with my current code, I am getting something like this:
Here is my current code
<Note_firstpart style="display: inline;background:#31B458; background: -moz-linear-gradient(#31B458 , #1BC14D); background: -o-linear-gradient(#31B458 , #1BC14D); background: -webkit-linear-gradient(#31B458 , #1BC14D); background: linear-gradient(#31B458 , #1BC14D); border: 1px solid #05500b; padding: 9px;">
</Note_firstpart>
<Note_body style="display:inline-block; background:#DDFFED; background: -moz-linear-gradient(#DDFFED , #BBFEDA); background: -o-linear-gradient(#DDFFED , #BBFEDA); background: -webkit-linear-gradient(#DDFFED , #BBFEDA); background: linear-gradient(#DDFFED , #BBFEDA); border: 1px solid #05500b; padding: 11px;">
Long Text</Note_body>
source to share
The simplest solution, which will give you a really clean markup, is to use a pseudo element.
With this you can either use Flexbox or any other way to size and color it, here it is done with absolute position and padding.
/* Note Box
-----------------------------------------*/
.note_text {
position: relative;
border: 1px solid black;
margin-left: 10px;
background: #FFFFFF;
padding: 3px 3px 3px 25px;
}
.note_text::before {
content: '';
position: absolute;
top: 0; left: 0;
bottom: 0; width: 20px;
border-right: 1px solid black;
background: #23E67E;
}
<body>
<div class="note_text">
Test seeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
NEW LINE TESTING TESTING
</div>
</body>
source to share
use flexbox for this.
Note. I changed the tag <note
todiv
section {
display: flex
}
div {
border: 1px solid #05500b;
padding: 11px;
}
div:first-of-type {
background: linear-gradient(#31B458, #1BC14D);
flex: 0 100px;
}
div:last-of-type {
flex: 1
}
<section>
<div> </div>
<div> Long Text</div>
</section>
source to share
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
border: 1px solid black;
height: auto;
width: 100px;
background-color: green;
}
.inner {
border-left: 1px solid black;
height: auto;
margin-left: 25px;
background-color: white;
text-indent: 10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Tesxt
</div>
</div>
</body>
</html>
I just used two divs where they are the same height, but the inner margin is offset to the left, and the text is also indented with a left margin, and the outer one with a border. You can simply change the colors to suit you.
source to share
<Note_body style="display:inline-block; background:#DDFFED; background: -moz-linear-gradient(#DDFFED , #BBFEDA); background: -o-linear-gradient(#DDFFED , #BBFEDA); background: -webkit-linear-gradient(#DDFFED , #BBFEDA); background: linear-gradient(#DDFFED , #BBFEDA); border: 1px solid #05500b;height:40px;width:150px;line-height:40px;">
<Note_firstpart style="display: inline;background:#31B458; background: -moz-linear-gradient(#31B458 , #1BC14D); background: -o-linear-gradient(#31B458 , #1BC14D); background: -webkit-linear-gradient(#31B458 , #1BC14D); background: linear-gradient(#31B458 , #1BC14D); border: 1px solid #05500b;padding:11px;margin-right:10px;">
</Note_firstpart>
Long Text
</Note_body>
this code displays as follows
source to share
You must use CSS Flexbox
I hope this is enough
.parent {
width: 500px;
margin: auto;
display: flex;
}
div:not(.parent) {
padding: 10px;
border: 1px solid #0E0E0E;
}
.color {
background: linear-gradient(#31B458, #1BC14D);
flex: 0 20%;
}
.text {
flex: 1;
}
<div class="parent">
<div class="color">
</div>
<div class="text">
Text
</div>
</div>
source to share