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
Related
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
I know this sounds too simple but I am unable to place one div below the other div , and my code is
html:
<div id="gamediv"></div>
<div class="style"></div>
css:
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
After doing some ugly hack in my css & in my first div style i am able to place my desired div below first div , this is my css code:
.style{
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
position:absolute;
bottom:0px;
left:323px;
}
first div style property: <div id="gamediv" style="position:relative;"></div>
for now this solution is working but still i can't figure out why previous solutions didn't worked, any explanation regarding this is appreciated!!
This is beacuses your div will be displayed befault in line.
It will take all the space it has to dispay divs.
something you can do is to create another div to include the 2 you create and specifying a specific width:
<div id="container">
<div id="gamediv"></div>
<div class="style"></div>
</div>
Then add your style such as
#container{
width: 800px;
height: 200px;
}
.gamediv{
width:750px;
height:40px;
}
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
then you may want to align with float or centre with margin:auto; Try to to imagine div as boxes. if it help you may add
border:1px solid black;
this will draw the box and you will see what you are doing
add display: block; also in the stylesheet (for both div)
You can watch the problem here at jsfiddle - http://jsfiddle.net/Askerov/xz4t4bce/
The thing is i want to move the inside element, but i do not want parent element to move with it? Can anybody explain how it works? And how do i move such element?
.aa{
background:#ccc;
width:600px;
height:300px; }
.bbb{
background:#333;
width:150px;
height:50px;
margin-top:40px;}
<div class='aa'>
<div class='bbb'>
</div>
You're seeing collapsing margins. Just add overflow:auto; to the parent div to restore the behavior you seek
jsFiddle example
ALWAYS add the position of the elements, once you do that, it will allow you to move it, see here:
.aa{
background:#ccc;
width:600px;
height:300px;
position:relative;
}
.bbb{
background:#333;
width:150px;
height:50px;
top:40px;
position:absolute;
}
jsFiddle
I have div inside a div (.konteineris2 and .feedback). When I use left:-200px in .feedback class, fixed div suddenly appears in the very left side of screen, outside .konteineris2. All I wanted it to move for 200px to the left outside .konteineris2, but not appear to the left screen border and then move 200px from that point.
HTML:
<div class="konteineris2">
<div class="feedback">
</div>
</div>
CSS:
.feedback{
position:fixed;
top:220px;
width:100px;
height:200px;
background:white;
}
.konteineris2{
width: 960px;
height:700px;
position:absolute;
top:460px;
padding-top:30px;
pointer-events:none;
overflow:hidden;
}
Any ideas how to manage it?
change position:absolute; to position:relative; in .konteineris2
Add margin-left: -200px; in .feedback
Check it on CodePen . I think you're looking for the same thing.
Without seeing more of the context in which this occurs I'd guess the following might achieve your goal: Try adding margin-left:-200px instead.
I have some trouble with my website.
I have a contact from which is based on 4 divs posisioned like this:
div 1 is the place where you can fill out your information
div 2 is the textarea for your message and a send button
div 3 is contact information
and div 4 are social media icons.
this all works great. on mobile they're are scaled beneath eachother and it works like a charm.
But now my designer want to add a format for landscape posioned mobiles (which I agree with him is nesacery because the contact page is way to long if you keep all the divs beneath eachother. so what he came up with is:
so div 1 and 2 beneath eachother with all the fill out fields. and on the right the information en social media icons.
but here starts my problem. because floating items will go beneath eachother in order. this means that div2 will stay beside div 2 and div 3 will be beneath div 1 like this (the arrow incades which 2 I want to swap:
is there any way to change this by just using css? the solution I came up with is writing a a new code posisioned in the good way for this problem and make it display none until the right landscape mode is registerd.. but this would be a bit of a heavy solution for such a problem in my opinion. so anyway has a better idea:
here a fiddle:http://jsfiddle.net/skunheal/p6Yy6/
#container{
height:200px;
width:400px;
background:#212121;
}
#id1{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id2{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id3{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id4{
height:90px;
width:190px;
background:#fff;
float: left;
}
this is my css right now. in the jsfiddle is the position of every box displayed. aldo it doesnt matter if the boxes on the right are swapped.
Hope anyone can help me out!
If I understand corectly the "responsive" behavior you are looking for , you ca wrap the two first divs together and the two last ones together. and float the wraps to the left. Then using a percent width and max-width/min-width you can achieve the desired behaviour.
See this FIDDLE (I modified the width of #container in your fiddle so it is responsive)
HTML :
<div id="container">
<div id="left_wrap">
<div id="id1">left above</div>
<div id="id2">left under</div>
</div>
<div id="right_wrap">
<div id="id3">right above</div>
<div id="id4">right under</div>
</div>
</div>
CSS (modified)
#left_wrap,#right_wrap{
width:50%;
max-width:380px;
min-width:190px;
float:left;
}
#container {
height:100%;
width:100%;
background:#212121;
}
#id1,#id2,#id3,#id4 {
height:90px;
width:190px;
background:#fff;
float: left;
}
Now, if you change the width of the fiddle window, you will see that if the window width is over 760px the divs all align normaly. If the window is between 760px and 380px you get the disired behaviour. If th window is under 190px the divs all stand on to of each other.
Since you are working with fixed height/width on these, you should be able to use absolute positioning instead of floats.
#container{
height:200px;
width:400px;
background:#212121;
position:relative;
}
#id1{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
left:0;
}
#id2{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}
#id3{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
right:0;
}
#id4{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
right:0;
}