I got a main articles section in my website where i got an img, and the right side the description of the img. After the words reach the container end, if should break the line and start after the img again. But my words are being behind the image ! Here's a fiddle that can help you to understand: JSFiddle. How can i make the words break the line and start again after the img ? is it possible to do this in the same container like i'm doing ? I'm giving the size of the container like this:
div{
margin-left:2.7vw;
background:black;
padding:10px;
width:50vw;
height:49vw;
word-wrap:break-word;
}
And the img/words like this:
div img{
margin-left:-10vw;
position:absolute;
height:40vh;
width:25vw;
}
div figcaption{
color:white;
}
It can be all seem in the fiddle. Thanks for the help !
Thanks.
You have placed the image 'absolutely'.
Use float:left on the image and remove the position:absolute property.
https://jsfiddle.net/pa8qq9Lh/
Add the float attribute to your img.
Example: float:left;
AND: Remove absolute positioning.
div{
margin-left:2.7vw;
background:black;
padding:10px;
width:50vw;
height:49vw;
word-wrap:break-word;
}
div input{
display:none;
}
div img{
margin-left:-10vw;
position:absolute; <--- REMOVE THIS RIGHT HERE
float:left;
height:40vh;
width:25vw;
}
div figcaption{
color:white;
}
You'll need to float the image, but left instead of right, and remove the absolute positioning:
div img {
margin-left:-10vw;
/*position:absolute; <-- remove this */
float:left; /* <-- add this */
height:40vh;
width:25vw;
}
JSFiddle
Related
I have two divs horizontally, and then trying the third div at the bottom ,
but the third one also coming at the right side instead of bottom .
<div style="width=100%">
<div id="slider">Left</div>
<div id="slider">Right</div>
</div>
<div id="text">Bottom</div>
here is the fiddle
please guide
thanks
You need to clear the float.
.clear{
clear:both
}
Here is the updated fiddle -
http://jsfiddle.net/CaZY7/125/
Also, don't use common id for multiple elements. Also, whenever you use float, it has to be cleared else the following elements may get affected.
you can try this one:
#slider {
position:relative;
left:0;
height:200px;
border-style:solid;
border-width:5px;
border-color:green;
float:left;
}
#slider img {
width:100%;
}
#content {
position:relative;
}
#text {
width:950px;
height:215px;
color:red;
float:left;
}
DEMO HERE
So I'm trying to create a drop down menu with the select and options elements that displays when the device width gets small enough. My problem is I can't center the div that the select element is contained within for some reason (the div id is "navbar2"). It just hugs the left side of the screen. Can anyone see my mistake here?
#navbar2 {
display:none;
}
#media (max-width:380px) {
#navbar2 {
display:inline-block;
width:80%;
margin-left:auto;
margin-right:auto;
border:1px solid red;
}
#navbar2 select {
width:40%;
}
}
So I figured this out. Apparently the "auto" trick doesn't work on inline-block elements. So I switched the "display" to "display: block;" and it centered the div horizontally.
I have read other posts on stack overflow but none of them have worked so far. The issue I am having is that 2 divs will not sit side by side.
I have a main content div and I have a small appbar div I am trying to put directly to the right of the content.
Everything I have tried has caused the appbar div to go under my footer, or caused the content to go under the container.
#appbar {
width:300px;
background-color:orange;
position:relative;
}
#content {
color:black;
width:500px;
}
footer {
height:10%;
opacity:0.8;
text-align:center;
}
Id put both the appbar and the content inside a container/wrapper div set to 800px width. Then float both the content and the appbar to left Float:left; then on the footer use clear:both. Bear in mind that the elements will sit side by side , if you want a bit of spacing between them use paddings or margins.
Try floating your elements like this:
#appbar{
float:right
}
#content {
float:left
}
#footer {
position:absolute;
clear:both;
Use display: inline-flex; in content and appbar.
#appbar {
width:300px;
background-color:orange;
position:relative;
display: inline-flex;
}
#content {
color:black;
width:500px;
display: inline-flex;
}
footer {
height:10%;
opacity:0.8;
text-align:center;
}
There is unknown space when I add the h1 tag above the p tag.
Here is the fiddle
What I need is here in the below image
After considering float:left, I tried it in my real page but it still gives problem
Here is the new code with float:left
Fiddle with float
Used to float and remove display inline-block;
p {
width: 80%;
vertical-align: top; margin:0
}
h1{
font-size:14px;
margin:0;
vertical-align:top;
}
.thumb{
float:left;
height:100px
}
Demo
That's because you have given your thumb class (which is your image) a height of 100px. Simply removing that height will fix it, see Fiddle: http://jsfiddle.net/CKRNs/4/
EDIT: As you've also said you want the p tag next to the image, add float: left to both the p tag and the thumb class, like so: http://jsfiddle.net/CKRNs/6/
The problem: Incorrect use of display:inline-block;
Solution: Remove all display:inline-block; and vertical-align:top; occurences and give .thumb float:left; (the correct way of aligning block elements next to eachother).
Example: http://jsfiddle.net/CKRNs/9/
Add a float:left; to the p, h1 and .thumb definitions.
You need to set your image float:left. See this demo: http://jsfiddle.net/CKRNs/14/
.thumb{
display:inline-block;
height:100px;
float:left;
}
This means the image will float left and allow the text to wrap
I would use position absolute for the thumb. and put margin-left to the h1 and p tag. http://jsfiddle.net/CKRNs/13/
h1, p{
margin: 0 0 0 60px;
}
.thumb{
position:absolute;
width:50px;
height:50px;
}
I have a div with some text and another div with some hidden buttons behind the text div and move to the left when needed (anitmation).
The problem is that the text inside div is moved to the right to let the buttons div not overlap with the text.
Check here:
http://clip2net.com/s/2JYBV
How to make text of main text div not interact depending of the the width/size/position of the button div?
.a {
position:relative;
width:400px;
height:300px;
margin:50px 200px;
background:#000;
padding:10px;
color:#fff;
}
.b {
position:absolute;
top:10px;
left:0px;
width:180px;
height:290px;
background:green;
display:none;
}
.a:hover .b {
display:block;
/* left:-150px; */
}
You can use relative and absolute positioning of divs to fulfill your required task.
http://jsfiddle.net/G9Q25/
try giving a z-index to your button div
z-index:2;
Try adding the following to your definition:
overflow:hidden;