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;
}
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 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>
Here is an example I'm working with:
http://jsfiddle.net/adyjzbuh/18/
Here is the code:
<div class="box1">
<div class="box2">Some text</div>
</div>
<div class="box1">
<div class="box2">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box3">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box4">Some more text, actually, 2 lines of textalicious text</div>
</div>
Here is the CSS:
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box3 {
display: inline-block;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box4 {
display: table-cell;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
As you can see, the first block does exactly what I want. The margins automatically adjust, the block is centered as intended. The issues come when there is multiple lines of text. When I use the same style for the next block with multiple lines of text, the block adjusts the width to 100% of the available space, leaving a big gap on the first line and block not appearing centered.
I tried changing the display to inline-block and table-cell but it does not work (as evidenced by the third and fourth block). I've searched everywhere for solutions and none have worked.
The outer container will always be 300px and the inner block will always have to be flexible and adjust to multi-line text. Any solutions/examples would be greatly appreciated, thank you.
EDIT I forgot to mention the client specifically wants the text to align to the left.
I would add:
text-align: center
or
text-align:justify
instead of:
text-align:left
Is that what you expected to look like?
You might want to put a max-width: 50%; on your innerboxes. The reason is your solution doesn't really work the way you want is your margins are set to auto, so the margin is calculated of the width. So if say your width would be 50% of the parent container (in this case .box1), the margins are automatically calculated to fill up the other 50%, 25% for each side.
Max-width could fix your problem, the innerboxes are still flexible, but only will take up 50% of the width.
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
max-width: 50%;
}
Not sure what you are looking for ultimately, but here is a working example, with using table method, like you have, but using
display:table;
display:table-cell;
accordingly with text aligned in the middle, and centered or left aligned.
I am just learning CSS so this is probably something super basic that I am just messing up. I have a page with 2 header divs one main content div and a footer div. I just have an image and a couple of lines of text in the main content div and I want them to display vertically. I have the text broken up like I want with spans and have display:block in the CSS for the div. I thought this would display everything vertically but it is still displaying all in one line.
I appreciate any help you can provide.
#a {
border: 2px solid #000000;
float: left;
margin: 10px 0px;
width: 30%;
}
#b {
border: 2px solid #000000;
float: right;
margin: 10px 0px;
width: 60%;
}
#c {
border: 2px solid #000000;
margin: 10px 0;
padding: 50px;
display: block;
text-align: center;
}
#d {
border: 2px solid #000000;
margin: 10px 0;
padding: 50px;
}
#e {
border:2px solid #000000;
margin: 10px 0;
width: 100%;
overflow: hidden;
}
img {
width: 150px;
height: 150px
}
Relating to this HTML
<div id="c">
<span><img src="../blog/assets/profile1.png" alt="Picture of Sid Watal"/></span>
<span>There and Back</span>
<span>My journey</span>
</div>
The image and following spans are all being displayed inline. There is currently no content in the other divs.
Thank you for your help.
<span>'s by default are inline.
You should be using divs if you want blocks. But if you want to force the span's in your html to be blocks (you shouldn't - you should change them to divs), just do this:
#c span { display: block; }
The easiest way to do this is remove the <span> tags, replacing them with <div>
The span tag is becoming redundant, I never use it any more as a DIV behave much better in all situations. Span doesn't like to be stylised.
Keep your CSS the same.
Your new HTML:
<div id="c">
<div><img src="../blog/assets/profile1.png" alt="Picture of Sid Watal"/></div>
<div>There and Back</div>
<div>My journey</div>
</div>
I'm trying to understand the basics of css applied to a test site that I'm working with.
Reducing the problem to it barest case I have three equal , two of which should contain lists, the third of which does not.
The html is as follows:
<div id="Div1" class="Results">
<select id="FirmList" size=10></select>
</div>
<div id="Div2" class="Results">
</div>
<div id="Div3" class="Results">
<select id="PersonList" size =10></select>
</div>
And the css as thus:
div {
border: 1px dashed black;
border-radius: 5px;
padding: 10px;
margin: 8px;
}
select {
width: 290px;
}
.Results {
border: 2px solid black;
width: 300px;
height: 500px;
display: inline-block;
}
If I comment out the elements the three s align correctly.
Bringing in either causes it's parent to move down the page. None of the other elements on the page (tables, headers and other divs) seem to affect the alignment in the same way.
Any suggestions?
Add vertical-align:top to the .Results rule
.Results {
border: 2px solid black;
width: 300px;
height: 500px;
display: inline-block;
vertical-align:top;
}
Demo at http://jsfiddle.net/QBVz9/1/embedded/result/
It has nothing to do with the select elements. even if you put a single letter in the .Results elements it will cause the problem.
It has to do with the fact that you have turned the div elements to display:inline-block.
.float-left {
float:left;
}
Fiddle example
A solution could be to add float on select element.