I'm having trouble forcing the text to stay relative within its div and at the same height as the image. So when the browser is resized, it doesn't overflow. I'm doing this as I'm creating a responsive webpage. I hope I've explained this clearly. Please check out my http://jsfiddle.net/DMnhB/1/
The html is as follows:
<div id="postd"><img
src="http://www.tntmagazine.com/media/content/_master/42628/images/barack-obama.jpg">
<span>
Text Here
Text Here
Text Here
</span>
</div>
And the CSS:
#postd{
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img{
width:40%;
}
#postd span{
float:right;margin-left:1px;
position: absolute;
background-color: red;
}
Here is a start, try the following CSS:
#postd {
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img {
width:40%;
display: inline-block;
vertical-align: top;
}
#postd span {
display: inline-block;
margin-left:1px;
background-color: red;
}
You can see how it looks at: http://jsfiddle.net/audetwebdesign/DMnhB/2/
I used inline-blocks to fix the overflow problem and vertical-align: top to place
the top of the image inline with the top of the text block.
You need to provide some additional feedback before I make any other adjustments.
Related
I have an outer div and 2 inner divs - one left-alignd and another is right next to it. The issue I am having is that the left div is shorter then the right and then right wraps around the left.
Below is my html and CSS:
<div id='green'>
<div id="orange">test</div>
<div id="red">
Effects<br/>
Add Class<br/>
Color Animation<br/>
Easing<br/>
Effect<br/>
Hide<br/>
Remove Class
Show
Switch Class
Toggle
Toggle Class
</div>
</div>
and here is CSS:
#green {
padding-top: 0.75em;
padding-bottom: 0.25em;
padding-right: 1em;
overflow: hidden;
border:20px solid green;
}
#orange {
width:185px;
border:10px solid orange;
float:left;
}
#red {
border:5px solid red;
width: 100%;
display: block;
}
My question is how can I prevent the right div from wrapping around the left? Preferable without setting a margin on the right div.
I also want the red div to always be on the right of the orange div, never going under it or wrapping around it, even if the page is resized or if the page is viewed on a mobile browser
You can use flexbox for this. Using the following changes to your CSS above:
#green{
display: flex;
align-content: top;
padding-top: 0.75em;
padding-bottom: 0.25em;
padding-right: 1em;
overflow: hidden;
border:20px solid green;
}
#orange{
align-self:flex-start;
width: 185px;
border:10px solid orange;
}
#red{
width: 100%;
border:5px solid red;
}
If you want #orange to be the same height as #red, remove align-self: flex-start
Demo: http://codepen.io/anon/pen/YwOjyP
I got it working by adding display: inline-flex; to #green.
Look: https://jsfiddle.net/4k1ohc10/
By the way, you didn't ask for a specific browser, so you can check this page: http://caniuse.com/#feat=flexbox
I did a quick search on stackoverflow and found some ways to solve it but none works.
I have my HTML code like below:
<div id="product_box">
<div id="pro_img"><img src="images.jpg'" width="140px"/></div>
<div id="pro_text">
</div>
</div>
and my CSS:
<style>
#product_box {
border: 1px solid;
border-color: #8dd5f6;
margin-top: 8px;
margin-left: 4px;
margin-right: 4px;
width: 330px;
height: 196px;
float:left;
}
#pro_text{
float:left;
width:189px;
height: 196px;
background-color: #CCC;
}
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
width:140px;
height: 196px;
}
</style>
The #pro_img is to the left and #pro_text is to the right, it works fine at default zoom and large zoom in but the problem is that when I zoom out the pro_text (right div) falls off the container box.
I found someone says that I need box-sizing: border-box; inside of my CSS. I tried it and put it like this:
<style>
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
box-sizing: border-box;
width:140px;
height: 196px;
}
</style>
It won't fall off anymore but the border is invisible as it border the image from inside.
I disable the border-right from #pro_img, the problem's gone but I want a border-right that would separate the image and the text.
Total width needed: 140(img)+1(border)+189(text) = 330px just fit the container box. I tried increase box width to 332px but it won't help.
Thank you.
That is because you are using float:left I cleared that used margin instead see this http://jsfiddle.net/3pmmjLx8/
UPDATED CSS CODE
#pro_text{
margin-left:141px;
width:189px;
height: 196px;
background-color: #CCC;
}
I have a link and an inline div next to it (to the right). I want the div to occupy the rest of the space to the right. Is there a way to do that?
what<div style="display:inline-block;width:200px;border:1px solid red">hello</div>
If you can wrap a span around the div, like:
what<span><div>hello</div></span>
jsFiddle example
You can apply this CSS to get what you're after:
a {
background: #ccc;
float: left
}
span {
display: block;
overflow: hidden;
padding: 0 4px 0 6px
}
div {
width: 100%;
display:inline-block;
border:1px solid red
}
You could wrap everything within a div and give it table and table cell to children:
http://jsfiddle.net/T4Qcd/
.inner{
border:1px solid red;
display:table-cell;
width:100%;
}
a{
display:table-cell;
}
.wrapper{
display:table;
}
You can do so by applying width to both anchor tag as well as the div.
a{
width:10%;
}
div{
width:90%;
}
Your html would be.
what
<div style="display:inline-block;border:1px solid red">hello</div>
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;
}
Following my code:
HTML:
<div>aaaaaaaaaaaaaaa
<span>test</span>
</div>
CSS:
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
}
span{
float: right
}
I would get this result: http://oi41.tinypic.com/2py25w1.jpg
I would like the text right-floated should not have to get out the div, so it must go to a new line inside the div when needed, as in the code that I posted.
In this case, for example, there is no need to let go of the text in a new line, because the text fits on the right of the text: http://jsfiddle.net/3kRan/2/
Set the overflow on your div to hidden like so:
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
overflow: hidden;
}
Your contents are overflowing when the span tries to float. This will allow your span to stay within its parent container.
This answer depends on your ability to wrap your text in an element, such as p. The ending result would be:
<div><p>aaaaaaaaaa</p>
<span>test</span>
</div>
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
height: 100%;
overflow: auto; /* fix to clear the parent */
}
p {
padding:0;
margin:0;
}
span{
float: right
}
Updated fiddle: http://jsfiddle.net/3kRan/5/