I want to show multiple buttons side by side, which is not the problem.
But I have one or more buttons with wrapped text because the button is too small (this should be).
If the text of one button is wrapped, they do not appear correctly side by side.
The button with wrapped text is lower than the other.
What causes this and how can I prevent it?
.container {
width: 200px;
border: 1px solid black;
}
button {
width: 50%;
height: 40px;
}
<div class="container">
<button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>
buttons are inline elements which are aligned baseline vertically by default...
...so use vertical-align:top to button...
Stack Snippet
.container {
width: 200px;
border: 1px solid black;
}
button {
width: 50%;
height: 40px;
vertical-align: top;
}
<div class="container">
<button>TEST</button><button>TEST WRAP TEXT</button>
</div>
display:flex on the .container does the trick.
Since you need the buttons to be 50% of its container, it is the best way to go.
.container {
width: 300px;
display: flex;
border: 1px solid black;
}
button {
flex: 1;
height: 40px;
}
<div class="container">
<button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>
Related
In this example:
div {
width: 100px;
height: 100px;
border: 8px solid #333;
}
#boxGreen {
background-color: green;
position: relative;
left: 150px;
}
#boxRed {
background-color: red;
float: left;
}
<div id="boxRed">Text 2</div>
<div id="boxGreen"> Text 1</div>
Why does the "text 1" go outside the "boxGreen"? How can I make the
text inside the box?
Add display: inline-block; inside your greenbox div like this:
#boxGreen {
display: inline-block;
background-color: green;
position: relative;
left: 150px;
}
div {
width: 100px;
height: 100px;
border: 8px solid #333;
}
#boxGreen {
background-color: green;
position: relative;
left: 50px;
display: inline-block;
}
#boxRed {
background-color: red;
float: left;
}
<div id="boxRed">Text 2</div>
<div id="boxGreen">Text 1</div>
You are missing display: inline-block; in your #boxGreen
When you make a position relative you have to add display: inline-block;
CSS
div {
width: 100px;
height: 100px;
border: 8px solid #333;
}
#boxGreen {
background-color: green;
display: inline-block;
}
#boxRed {
background-color: red;
display: inline-block;
}
HTML
<div id="boxRed">Text 2</div>
<div id="boxGreen"> Text 1</div>
Solution 1 Mark the elements as display: inline-block; Learn More Here
Solution 2 Wrap the elements in another container and mark it as display: flex; Learn More Here
Problem Your green element wasn't actually aligned with the red element, haha. It just appeared that way, remove the float: left and you'll see the container is actually beneath it. :)
float is weird. It can be a tricky thing to work with because you get strange cases like this. A floating element is basically ignored by block level elements, but not by inline elements. Because your green box is a block, and the text inside is inline, the text is pushed down.
If you remove the float: left from the red box, you will see the green box move down and be realigned with the text. This is because both block and inline elements are now being pushed down.
If you instead set the green box to display: inline-block, the green box will be pushed around by the floating red box because it is now partially inline (although it will not wrap to a new line like the text did because it is also a block).
As you can see, floating elements have some strange behavior, which is why I generally avoid them. Unless you need some inline elements to wrap around some other element, you can usually use a flexbox or grid to do what you need with fewer side effects.
CSS-Tricks has some great articles to help you understand floats, flexbox, and grid.
A better solution is to wrap the div elements in a container. After, you can use display: flex; to set it in row.
.container {
width: 100%;
display: flex;
}
div#boxGreen,
div#boxRed {
width: 100px;
height: 100px;
border: 8px solid #333;
margin-right: 30px;
}
#boxGreen {
background-color: green;
}
#boxRed {
background-color: red;
}
<div class="container">
<div id="boxRed">Text 2</div>
<div id="boxGreen"> Text 1</div>
</div>
attributing the display to inline-block for your #boxGreen should work
#boxGreen {
background-color: green;
position: relative;
left: 150px;
display:inline-block;
}
I would like to have a customized box.
I should have a header for the box, where I can include button or text.
The box should have an image box on the left and text box on the right.
Both the boxes should be of the same height.
In the text box, I should be able to place buttons, text, links etc.
The background of the whole thing should be able to be customized.
How to do it?
first of all, if you want to ask a question, others must understand what actually the questioner wants. I hope something like this is what you are asking for.
.customizedBox {
border: 1px solid #111;
width: 500px;
height: 400px;
}
.header {
background-color: gray;
width: 100%;
height: 50px;
text-align: center;
}
.imageBox {
background-color: blue;
float: left;
width: 50%;
height: 350px;
}
.textBox {
background-color: green;
float: right;
width: 50%;
height: 350px;
}
<div class="customizedBox">
<div class="header">Header
</div>
<div class="imageBox">Image Box
</div>
<div class="textBox">Text Box
<button style="display: block;">Button</button>
<p>Paragraph</p>
A link
</div>
</div>
I'm not sure how I should go about this issue.
I'm fairly new to the front-end development so bear with me.
I have 4 boxes explaining the process step by step. I managed to
display them side by side by using the inline-block property. Now, I am trying to add 4 more small box looking buttons right on top of the boxes. Here is what I mean.
This is the index.html code.
<section>
<div class="how-text">
<h3>How to use SnappyApp</h3>
</div>
<div class="how-box">
<div class="idea-top">
</div>
<div class="idea">
</div>
<div class="scatch">
</div>
<div class="craft">
</div>
<div class="launch">
</div>
</div>
</section>
Here is the css code.
section {
height: auto;
padding-bottom: 100px;
background-color: #2c3e50;
}
.how-text {
text-align: center;
display: inline-block;
width: 100%;
color: white;
margin-top: 40px;
font-size: 30px;
letter-spacing: 3px;
}
.how-box {
text-align: center;
height: auto;
margin-top: 130px;
}
.idea {
background: url('img/idea.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.scatch {
background: url('img/scatch.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.craft {
background: url('img/craft.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
.launch {
background: url('img/launch.svg') center center no-repeat;
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
I also feel like my css code is very repetitive. If you have any suggestions, please help! I really appreciate all your help.
Thank you.
Here
https://jsfiddle.net/ds0md0xc/1/
EXPLANATION
All you need to do is to nest a child element in those divs. Since you specified them to be buttons. I used
<button>
element. But feel free to change it to a div if you want.
<div>
<button> </button>
</div>
For the css. It is going to be pretty simple just set width and height accordingly and it will position itself to the top.
button{
width:100%;
height: //whateveryouwant;
}
For the border, you dont need to have a second div. Just set the border bottom of the button as in fiddle
Hope this helps
here's a fiddle to demo
you should have a 'container' div to act as a parent and have both boxes as children :
<div class='super-box'>
<div class='button'> </div>
<div class='picture-box'> </div>
</div>
as far as your repetitive code, anything that repeats more than a few times (say 3 times) put it in a separate class and apply multiple classes to each div separated by a space
<div class='firstClass secondClass'></div>
Repeat your div called how-box. Here is a link to a fiddle that shows that: http://jsfiddle.net/eofct5ur/
Also your css could be cleaned up by doing something like this:
.idea, .scatch, .craft {
width: 200px;
height: 200px;
display: inline-block;
margin-right: 25px;
border: white solid medium;
}
then you would do:
.idea {
background: url('http://www.example.com/images/1.png');
}
and so forth for the other divs.
You can just wrap the button and the box inside 1 div.
In that manner they will be displayed one below another (set width: 100%).
So now you have 4 divs, with each inside a button and another div.
If you do then your inline-block on the first 4 divs they will be alined one next to another and inside you have your button and your text.
Greetings
I want to have a block on the left and a box which contains text to its right, but I don't want the text that wraps to drop under the block. It should stay with the confines of a rectangle that is adjacent the block. This is how a table would behave, but I'm not sure what the best way to accomplish this outside of one is.
I hope this fiddle will clarify: http://jsfiddle.net/bernk/Ck7cj/
<div class="container">
<div class="block">BLOCK</div>
<div class="text">This is a text box that wraps onto at least two lines</div>
</div>
Instead of floating you can use display:table-cell:
jsFiddle example
* {
box-sizing: border-box;
}
.container {
width: 200px;
border: 1px solid black;
overflow: auto;
}
.block {
display:table-cell;
width: 70px;
height: 20px;
background: red;
color: white;
text-align: center;
}
.text {
border: 1px solid red;
display:table-cell;
}
I have two divs contained within a larger div and I'd like them to be laid next to each other. My approach was to float the first div left and set Overflow: hidden on the containing div.
For some reason it's not working and the 2nd div ends up ontop of the first.
Herse is the demo, http://jsfiddle.net/9xmDP/. I have some color coding which I was using to try and debug the overlapping. The code is also below. The signup form should be next to the login form instead of on-top of it.
HTML
<div id="container">
<div id="signupDiv">
<div id="signupLabel">
SignUp
</div>
<form id="signupForm">
User <input type="text" name="user"><BR/>
</form>
</div>
<div id="loginDiv">
<div id="loginLabel">
Login
</div>
<form id="loginForm">
User <input type="text" name="user"><BR/>
</form>
</div>
CSS
#container{
overflow: hidden;
}
#signupLabel{
border: solid black 1px;
width: 300px;
}
#signupDiv{
float:left;
}
#loginLabel{
border: solid red 1px;
width: 300px;
}
#loginDiv{
width: 300px;
border: solid pink 1px;
}
Try this css. fiddle here
#container{
width:604px;
}
#signupLabel{
border: solid black 1px;
width: 300px;
}
#signupDiv{
float:left;
width:300px;
}
#loginLabel{
border: solid red 1px;
width: 300px;
}
#loginDiv{
width: 300px;
float:left;
border: solid pink 1px;
}
You need to float:left #loginDiv as well. See your updated fiddle here:
http://jsfiddle.net/9xmDP/2/
When you float an element, it is removed from the normal content flow, and any content in its parent element and other children of the parent tries to wrap around it.
So the signupDiv is indeed floated to the left, which puts it on top of the non-floating loginDiv. The content in the loginDiv does try to wrap around the signupDiv, but since you've specified both elements to be 300px wide, there's no room for it, and so it must go below the floating div instead.
The simplest solution is to float both divs, like this:
#signupDiv, #loginDiv {
float: left;
}
You can place the divs next to each other, by making them both float.
If you make the container 605px, then the divs will fit in there (including the border)
#container{
width: 605px;
overflow: hidden;
}
And this
#loginDiv{
float: left;
width: 300px;
border: solid pink 1px;
}
Diplay:inline will also do the trick here..
http://jsfiddle.net/9xmDP/4/
#loginDiv{
width: 300px;
border: solid pink 1px;
display:inline-block;
}