Im trying to make the two inline-block divs to be aligned in the center
why is there white space on the right side of the div
.wrapper {
border: red 2px solid;
min-width: 40%;
display: inline-block;
}
body {
width: 80%;
margin: 0 auto;
border: 1px black solid;
}
<div class="wrapper">
<h1>
hello
</h1>
</div>
<div class="wrapper">
<h1>
hello
</h1>
</div>
You have set the width of your columns to 40%. Little maths 2*40 = 80%. And you have 100% of your parent element. Change width to 50% and you won't have any white spaces.
You have to take in consideration that the wrapper is acting on a 100% base not a 80%.
.wrapper {
border: 2px red solid;
min-width: 50%;
display: inline-block;
}
Even using Flex will be good.
.wrapper {
border: red 2px solid;
min-width: 40%;
display: block;
flex: 1;
}
body {
display: flex;
width: 80%;
margin: 0 auto;
border: 1px black solid;
}
<div class="wrapper">
<h1>
hello
</h1>
</div>
<div class="wrapper">
<h1>
hello
</h1>
</div>
inline-block elements can be centered via text-align from a parent (here body).
To deal with the white-space: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
text-align + font-size can be a start:
body{font-size:0;text-align:center} .wrapper{font-size:1rem}
.wrapper {
border: red 2px solid;
min-width: 40%;
display: inline-block;
}
body {
width: 80%;
margin: 0 auto;
border: 1px black solid;
}
<div class="wrapper">
<h1>
hello
</h1>
</div>
<div class="wrapper">
<h1>
hello
</h1>
</div>
Related
As image, is it possible if the green element is aligned center when its needed width is shorter than parent width - yellow shape width, but align right if not? Thanks.
Without any library (e.g. Bootstrap), you could use a div with display: table; and margin: 0 auto;, nested with another div with display: inline-block; property.
This is the example:
.row {
margin-bottom: 10px;
}
.yellowBlock {
display: inline-block;
background-color: yellow;
border: 1px solid #ffc107;
border-radius: 5px;
width: 20%;
height: 30px;
}
.pre-greenBlock {
display: inline-block;
width: 70%;
}
.greenBlock {
display: table;
margin: 0 auto;
background-color: lightgreen;
border: 1px solid green;
border-radius: 5px;
padding: 0 10px;
height: 30px;
}
<div class="row">
<div class="yellowBlock"></div>
<div class="pre-greenBlock">
<div class="greenBlock">Short text</div>
</div>
</div>
<div class="row">
<div class="yellowBlock"></div>
<div class="pre-greenBlock">
<div class="greenBlock">Very looooooooooooooooooooooooong</div>
</div>
</div>
Obviously, you need control the width of your yellow and green block.
This isn't the unique solution. You could use too a table or Bootstrap with row and columns.
I have 3 divs which are horizontally aligned (aqua color). Inside each div, there are two divs (red and black one).
What I am trying to do is, align the black divs horizontally regardless of the red div. The css for the black div is
.black-div {
width: 100%;
height: 45px;
max-width: 235px;
display: inline-block;
color: #33244a;
font-size: 16px;
text-transform: uppercase;
font-weight: normal;
text-align: center;
line-height: 43px;
border: 2px dashed #d5d1d8;
border-radius: 6px;
box-sizing: border-box;
}
Output will something like this
I am not good at all in css. I have tried using position: fixed / absolute but no luck.
Try it.
Use div and min-height.
section{
display: inline-block;
border: 1px solid red;
width: 100px;
}
.textarea-wrap{
overflow: hidden;
min-height: 200px;
}
.textarea-wrap > textarea{
width: 100%;
resize: none;
}
.red{
background-color: red;
}
<div>
<section>
<div class="textarea-wrap">
<textarea rows="3">12312312</textarea>
</div>
<div class="red">
red
</div>
</section>
<section>
<div class="textarea-wrap">
<textarea rows="10">12312312</textarea>
</div>
<div class="red">
red
</div>
</section>
<section>
<div class="textarea-wrap">
<textarea rows="6">12312312</textarea>
</div>
<div class="red">
red
</div>
</section>
</div>
You should use table to make it more manageable, or use absolute positioning on the black div so you can position them measure from the bottom of the blue div.
There may be a solution without the spacer. Im looking for it :)
found solution without spacer justify-content: space-between;
.wrapper {
display: flex;
flex-direction: row; /* flex in a row inside (make columns .col) */
}
.col {
display: flex;
flex-direction: column; /* flex in a column inside */
justify-content: space-between; /* since the elements must not grow, fill the space between them */
flex: 1 1 100px; /* grow and shrink of col allowed to fill row evenly starting at 100px*/
margin: 5px;
border: 3px solid black;
background-color: aqua;
}
.red {
flex: 0 1 auto; /* no vertical (col) growing (so it does not expand vertically) */
border: 3px solid black;
border-radius: 10px;
background-color: red;
margin: 5px;
padding: 10px;
}
.black {
background-color: black;
color: white;
margin: 5px;
padding: 10px;
display: block;
flex: 0 1 auto; /* no growing allowed */
}
.resize {
overflow: hidden;
resize: vertical;
}
<div class='wrapper'>
<div class='col'>
<div class='red'>Some wide wide wide wide wide wide Text</div>
<div class='black'>Footer</div>
</div>
<div class='col'>
<div class='red'>Some<br/>much<br/>longer<br/>Text</div>
<div class='black'>Footer</div>
</div>
<div class='col'>
<div class='red resize'>Some Text<br><b><u>Resize me!</u></b></div>
<div class='black'>Footer</div>
</div>
</div>
Edit removed spacer div
Edit2 added css commenting for easier understanding
I've been following a css and html tutorial at udacity.
My code is this:
.image{
max-width: 50%;
}
.app{
display: flex;
}
.description{
color: red;
max-width: 705px;
}
<h1 class="title">My App</h1>
<div class="app">
<div class="image">image</div>
<div class="description">some long text</div>
</div> <!-- /.app -->
When I increase max-width of the image div, image div remains the same width no matter what.
But when I increase max-width of description, it changes accordingly.
Also when I change max-width to width it changes also the 460px and occupies more space than with max-width.
Why is this happening ?
max-width doesn't set the width of an element.
It tells your divs: this is how wide you can get (starting from 0, content width, or min-width)
Your divs have a max-width: 50% (.image) and max-width: 705px (.description).
If there were no content in either div, the width would be zero.
.app {
display: flex;
padding: 5px;
}
.image {
max-width: 50%;
border: 1px dashed black;
}
.description {
color: red;
max-width: 705px;
border: 1px dashed green;
}
<h1 class="title">My App</h1>
<div class="app">
<div class="image"></div>
<div class="description"></div>
</div>
<!-- /.app -->
If the content width were to be less than the max-width, the divs would take the content width.
.app {
display: flex;
padding: 5px;
border: 1px solid red;
}
.image {
max-width: 50%;
border: 1px dashed black;
}
.description {
color: red;
max-width: 705px;
border: 1px dashed green;
}
<h1 class="title">My App</h1>
<div class="app">
<div class="image">xxx</div>
<div class="description">xxxx</div>
</div>
<!-- /.app -->
If the content were to be more than the max-width, then max-width would come into play.
.app {
display: flex;
padding: 5px;
border: 1px solid red;
}
.image {
max-width: 10%;
border: 1px dashed black;
}
.description {
color: red;
max-width: 70px;
border: 1px dashed green;
}
<h1 class="title">My App</h1>
<div class="app">
<div class="image">image image image image image image image</div>
<div class="description">some long text some long text some long text some long text some long text</div>
</div>
<!-- /.app -->
I have a central div that have 4 others divs arrount it (top, right, left, bottom).
Top and Bottom divs are suposed to be fixed. They don't have to increase neither height nor width.
Right and left divs are ONLY suposed to increase its width.
How?
The "content" div (central) is a table that can have as many rows as the user wants. Then, I want to increase or decrease the height of the left and right divs depending on the height of the "content".
I want to automatically do that .
How can I do that?
I have created an example with what I have done, without success.
https://jsfiddle.net/y6ad2crg/4/
<div class="pantalla">
<div class=" pantallaSup"></div>
<div class="pantallaEsq"></div>
<div class="pantallaDre"></div>
<div class="interiorPantalla">
content<br>
aaa<br>
bbb<br>
ccc<br>
ddd<br>
eee
</div>
<div class="pantallaInf"></div>
</div>
The result I want to get is that:
What am I doing wrong?
Maybe just changing little things in css it may be done, or maybe my html is wrong designed...
change u code
https://jsfiddle.net/p7haf3oo/
.pantalla {
/*position: relative;*/
display: block;
width: 690px;
background-color: gray;
}
.pantallaSup {
height: 200px;
width: 100%;
background: orange;
}
.flex {
display: flex;
align-items: stretch;
}
.pantallaEsq {
width: 69.4px;
border-right: 4px solid black;
background: red;
display: block;
}
.pantallaDre {
width: 69.4px;
border-left: 4px solid black;
background: red;
display: block;
align-self: stretch;
min-height: 100px;
}
.pantallaInf {
height: 200px;
width: 100%;
background: orange;
}
.interiorPantalla {
position: relative;
margin: 0 auto;
border: 1px;
border-color: blue;
border-style: solid;
width: 550px;
background-color: white;
}
<div class="pantalla">
<div class="pantallaSup"></div>
<div class="flex">
<div class="pantallaEsq"></div>
<div class="interiorPantalla">
content
<br> aaa
<br> bbb
<br> ccc
<br> ddd
<br> eee
</div>
<div class="pantallaDre"></div>
</div>
<div class="pantallaInf"></div>
</div>
I believe I have coded what you're looking for -https://jsfiddle.net/Shuaso/vpmn3LLv/
I removed all the unnecessary divs and used CSS borders and background colors to achieve the same effect. You can alter the content in the "content" div and see the dynamic styles. Here's the code:
CSS:
.container {
width: 500px;
background-color: orange;
padding: 20px 0;
}
.content {
border-left: 20px solid red;
border-right: 20px solid green;
background-color: white;
}
HTML:
<div class="container">
<div class="content">
<p>test</p>
<p>test</p>
</div>
</div>
I want to gain the below layout:
It seems that when the right box is small, the bottom left box wants to move away from the left side and beside the top left box. If the right box is full and tall, then it pushes the bottom left box back to where I want it to be.
HTML
<div class=page>
<div id="stack-vert">
<div id="stack-horz">
<div id="message_center_content">
<h2> Your Messages </h2>
</div>
<div id="message_center_details">
</div>
<div id="message_center_details">
</div>
<div id="clearingdiv2"></div>
</div>
</div>
CSS
.page{
margin: 2em auto;
width: 75em;
border: 5px solid #ccc;
padding: 0.8em; background: white; display:table;
}
#message_center_details{
float:left;
border: solid thin black;
overflow:hidden;
padding: 5px;
width: 25%;
background-color: #ffffcc;
margin: 5px;
}
#message_center_content{
float:right;
border: solid thin black;
padding: 5px;
width: 60%;
background-color: #F0F0F0;
margin: 5px;
}
JS Fiddle
It works in jsFiddle, but now in my browser! Instead the two boxes on the left interfere with each other, the bottom one sits to the right of the top one and below the box on the right.
Any help would be really appreciated.
Something you could do
<div id="Container">
<div id="left">
<div class="section">
</div>
<div class="section">
</div>
</div>
<div id="right">
<div id="message">
<div style="width:100px;height:260px;background:white;">Edit this</div>
</div>
</div>
</div>
#Container {
width: 100%;
min-height: 300px;
background: red;
}
#left {
float: left;
width: 40%;
background: yellow;
min-height: 300px;
box-sizing: border-box;
padding: 10px;
}
.section {
width: 100%;
display: block;
min-height: 120px;
background: red;
box-sizing: border-box;
margin-bottom: 10px;
}
#right {
float: left;
width: 60%;
min-height: 300px;
background: blue;
box-sizing: border-box;
padding: 10px;
}
#message {
width: 100%;
min-height: 200px;
background: red;
}
see fiddle for what i would do. I have added colors so you can see whats happening.
adjust the white div height in the HTML tab to see the message div (the red one on the right) adjust its height.
Your content would just go inside the left divs with a class of section, and the right div id message.
I would stay away from libraries until you know how to do most things yourself.
Great place to learn html/css/js and more
You are maybe after such a solution to have two outer divs side-by-side:
.wrapper{
width: 90%;
margin: auto;
display: flex;
justify-content: space-between;
}
.side{
width: 30%;
}
.side div{
margin-bottom: 10px;
padding: 10px;
}
.side div:last-child{
margin-bottom: 0;
}
.main{
width: 67%;
}
.main div{
padding: 10px;
}
.border{
border: 2px solid black;
}
<div class="wrapper">
<div class="side">
<div class="top border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
<div class="bottom border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
</div>
<div class="main">
<div class="border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
</div>
</div>