Here's image displaying my problem
CSS for wrapper is
display: block;
text-align: center;
CSS for each DIV is
margin: 30px 10px;
display: inline-block;
height: 100%;
text-align: center;
width: 30%;
What could be causing this? I tried fiddling with flex but the outcome is the same.
You said you fiddled with flexbox. However to make use of it, you should not just fiddle with it, but study how it works.
To achieve what you want, use display: flex; on the wrapping div and remove height property from your contained divs.
Run this visual example to see how it works:
.parent {
padding: 20px;
background: red;
width: 400px;
height: 100px;
display: flex;
}
.child-1 {
background: yellow;
width: 100px;
}
.child-2 {
background: orange;
width: 100px;
}
<div class="parent">
<div class="child-1">
Hello
</div>
<div class="child-2">
Multi
<br>
Line
<br>
Content
</div>
</div>
Related
I'm trying to format a HTML DIV in a way that the margin-top is set responsively based on the div's height: jsfiddle
There's another div inside the wrapper, that has a display: none set to it, but it may change when the user inputs a wrong password. Thing is, there is a div below that it's being pushed down when display: content is set to the second div. I want the content of the page to responsively go upwards instead of downwards.
How's now:
How it should be:
Given your example, your goal and your preference to avoid flexbox due to IE10, I think your best option is to use display:table for this container.
With this, you have the ability to use vertical-align properties in the "table-cell".
Check the example below. I added a toggle button to show/hide your captcha for demo purposes. May want to view it full screen to get the effect.
$("#toggle").on('click', function() {
$(".captcha").toggle();
});
html,body {
height: 100%;
}
.outer-wrapper {
height: 100%;
width: 100%;
background: #eeeeee;
display: table;
}
.inner-wrapper {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
height: inherit;
}
.login-wrapper {
background-color: #172238;
color: white;
width: 200px;
text-align: center;
height: auto;
display: block;
margin: 0 auto;
}
.captcha{
margin-top: 250px;
display: content; // This one changes
}
.homologation-line {
min-width: 200px;
background-color: #ffd800;
color: black;
text-align: center;
height: 30px;
}
#toggle {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle captcha</button>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="login-wrapper">
<p>Login</p>
<div class="captcha">
ENTER THE DIGITS:
</div>
</div>
<div class="homologation-line">
HOMOLOGATION
</div>
</div>
</div>
I am trying to figure out how to make a space between text and image. I've tried everything I learned so far, including word spacing, padding.
Let me show you picture which will give you a better understanding of what I want to achieve.
I want to increase space between the image and the text. Highlighted as yellow.
How can I achieve it using this example code? Link to CodePen
html
<div class="navbar-header">
<div class="container">
<div id="logo">
<a href="#">
Amazing <img src="http://www.clipartkid.com/images/650/image-spiderman-logo-png-spider-man-wiki-wikia-hYo1XM-clipart.png"/> Spiderman
</a>
</div>
</div>
</div>
css
.navbar-header {
border-bottom: 1px solid black;
height: 70px;
margin-bottom: 0;
position: fixed;
width: 100%;
z-index: 100;
}
.container {
align-items: center;
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
#logo {
align-items: center;
margin: auto;
}
#logo a {
align-items: center;
color: black;
display: flex;
flex-grow: 2;
margin: auto;
text-decoration: none;
word-spacing: 200px;
}
#logo img {
height: 66px;
margin: auto;
}
I think giving the img a left/right margin should be the best solution. Easiest way to accomplish this:
#logo img {
height: 66px;
margin: auto 20px;
}
If I understand your question..... I would just add left and right margins to the #logo img of about the space you want
#logo img {
height: 66px;
margin: auto;
/*you would want to change this, so as to not have both declarations, I just dont know how much top and bottom margin you want*/
margin-left: 15px;
margin-right: 15px
}
So, I have three divs:
<div class="takeremaining">
<div class="centeredcontent">
This is my centered content
</div>
</div>
<div class="dynamicallyallocated">
This is my dynamic content
</div>
I'd like the rightmost div dynamicallyallocated to be dynamically sized based on the content using display: inline-block; and the other div takeremaining to take the remaining space in the parent div. I've tried this with my css:
.takeremaining {
display: inline-block;
width: 100%;
float: left;
background-color: #0000ff;
}
.centeredcontent {
display: table;
margin: 0 auto;
background-color: #00ffff;
}
.dynamicallyallocated {
display: inline-block;
float: right;
background-color: #00ff00
}
but, as you can see by this JSFiddle demo, the div dynamicallyallocated is bumped beneath takeremaining. I believe this is because of width: 100%; in takeremaining, but I'm not sure how to give it a dynamic width based on the conditional width of dynamicallyallocated. What would you suggest?
Here is a solution for you.
.container {
display: table;
width: 100%;
}
.takeremaining {
display: table-cell;
width: 100%;
text-align: center;
background-color: #0000ff;
}
.centeredcontent {
display: inline-block;
background-color: #00ffff;
}
.dynamicallyallocated {
display: table-cell;
width: 0;
background-color: #00ff00;
white-space: nowrap
}
<div class="container">
<div class="takeremaining">
<div class="centeredcontent">
This is my centered content
</div>
</div>
<div class="dynamicallyallocated">
This is my dynamic content
</div>
</div>
I want to make dynamic width columns inside of dynamic width div. Everything seems to be working just fine, but if I want to make the sum of column widths 100%, the third column jumps down even though there is still space. And I can't get rid of the spacing after each column.
Maybe some of you might know why?
Here is my fiddle!
http://jsfiddle.net/vMe5L/
My code:
<style>
.content { width: 300px; height: 200px; background-color: gray; }
.left { width: 20%; display: inline-table; height: 100%; background-color: red; }
.middle { width: 30%; display: inline-table; height: 100%; background-color: blue; }
.right { width: 47%; display: inline-table; height: 100%; background-color: yellow; }
</style>
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
Thanks in advance, you guys are amazing.
Either float the elements, or remove the whitespace in between. On inline elements (which includes styling them to display: inline-table or inline-block), whitespace is shown too, even if it is collapsed to a single space. So:
<div class="content"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
works fine.
Better to use table and table-cell display.
Demo: http://jsfiddle.net/abhitalks/vMe5L/5/
CSS:
div { box-sizing: border-box; }
.content { display: table; width: 300px; height: 200px; background-color: gray; }
.left { width: 20%; display: table-cell; height: 100%; background-color: red; }
.middle { width: 30%; display: table-cell; height: 100%; background-color: blue; }
.right { width: 50%; display: table-cell; height: 100%; background-color: yellow; }
Update:
If you want to stick to inline-table, then get rid of the white spaces. The best way would to introduce comments:
<div class="content">
<div class="left"></div><!--
--><div class="middle"></div><!--
--><div class="right"></div>
</div>
Try this out:
Fiddle
Changes made,
added css display:table to outer class content, and inner classes changed to display:table-cell;
I'm missing something obvious today, guys - would appreciate some help please.
I've got a horizontal row of DIVs inside another DIV. I want the third DIV to show as partly hidden by the top DIV. But it isn't showing at all.
Here's the CSS:
.outer {
background: #800;
height: 90px;
width: 300px;
overflow: hidden;
white-space: nowrap;
}
.label {
float: left;
display: block;
background: #888;
width: 75px;
height: 50px;
margin: 10px;
padding: 10px;
line-height: 50px;
font-size: 45px;
text-align: center;
}
Here's the HTML:
<div class="outer">
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
<div class="label">4</div>
</div>
Thanks for your help!
I'm missing something obvious today, guys - would appreciate some help
please.
The "obvious" thing you're missing is that the third and fourth inner divs are dropping underneath because there is not enough horizontal space. For instance, if I check it using Chrome's Developer Tools:
The simplest way to fix this is to switch from float: left to display: inline-block, with white-space: nowrap (you already have it!) on the containing element:
http://jsfiddle.net/rGfNY/
you need to wrap them in a new div, give the div a width, (bigger than your outer div) it will be cut off by the outer div's overflow hidden.
on thing to note: the width of that inner div is not adjusting with the content, either you specifically set it very high, or you have to calculate it to the content either just put it hardcoded in css, or use javascript.
html:
<div class="outer">
<div class="inner">
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
<div class="label">4</div>
</div>
</div>
css:
.outer {
background: #800;
height: 90px;
width: 300px;
overflow: hidden;
white-space: nowrap;
}
.inner {
width: 460px;
}
.label {
float: left;
display: block;
background: #888;
width: 75px;
height: 50px;
margin: 10px;
padding: 10px;
line-height: 50px;
font-size: 45px;
text-align: center;
}
working example:
http://jsfiddle.net/f2wpm/