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)
Related
I'm trying to show a text in a border div located in absolute location inside another div.
Option 1 with width:auto; - fiddle: https://jsfiddle.net/c21kt6r4/
The problem is that the left side box expands too much.
Option 2 - with width:min-content; fiddle: https://jsfiddle.net/ay159rw6/2/
The problem is that the right side box text wraps.
What is the clean way to wrap text in div and show a correct border in both multi and single line texts?
For reference the html is :
<div class="main">
<div class="item" style="left:0;">
<label>SHAMPOO & CONDITIONER</label>
</div>
<div class="item" style="left:165px;">
<label>WHAT EVER</label>
</div>
</div>
And CSS:
.main{
position:relative;
border:solid black 1px;
width:400px;
height:400px;
}
.item{
border:solid blue 1px;
width:160px;
height:150px;
position: absolute;
}
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:min-content;
}
Follow these steps.
1) You need to warp the label inside a div and then give it position:absolute. Also you need to use right:5% to give spacing on both lefr-right sides. We're wrapping into a div because we want position relative to div we're applying table cell property.
2) You need to display: table-cell; your label tag .item label
3) Give word-break: break-all; your label tag .item label so word can take whole space
Here is the working demo: https://jsfiddle.net/o5dgzn0c/
Demo image.
Hope it will help!
I would suggest you going with max-width here, because it will limit max width of the item element to some value and keep possibility to include width:auto feature width for all elements less than it, something like:
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:auto;
max-width:100px;
}
However, I would go with JS approach on this, as you have no idea what text might appear.
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 2 divs and I wanted to resize images inside in those divs but they should allways fill div and constrain proportions.
Like this one:
http://www-07.ibm.com/sg/60/
If you try to resize them, they will allways fill their divs and images will allways keep their proportions.
HTML:
<div class="one">
<img src="imgs/photo1.jpg" class="photo1">
</div>
<div class="two">
<img src="imgs/photo2.jpg" class="photo2">
</div>
CSS:
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
}
.two{
position:relative;
overflow:hidden;
width:50%;
height:50%;
float:left;
}
How do I style those images to look like this?
http://www-07.ibm.com/sg/60/
Site is using jquery plugin for the effect, however you can get the same by css3 background-size:cover property.
What you have to do is :
Remove source image and give it through background and use background-size:cover.
<div class="one">
</div>
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
background: url("path to image") no-repeat center center;
background-size : cover;
}
I could be missing something here, but if I understand your question correctly, you can just add:
width: 100%;
to your img tags and they will always fill the containing div.
Try this,
.one img, .two img {
width:100%;
height:auto;
}
I think you would get the best result by not using the tag, but instead make these background images with the attribute:
background-size:cover;
background-position:center;
I'm fairly confident this is one of those things that has been discussed endlessly out there in the internet, but I can't find a solution.
I need to float 2 divs on the same line as a paragraph. Both of the divs have variable width and I need the paragraph to shrink into the available space and wrap its contents so that none of the elements themselves wrap off the line.
I've set up a JSFiddle
HTML here:
<div class="icon"></div>
<p>This is a really long line of text that will need to wrap</p>
<div class="count"></div>
CSS here:
.icon {float:left; width:50px; height:50px; background-color:#4d4d4d; margin-right:10px}
p {margin:0; overflow:auto; display:inline-block}
.count {float:right; width:250px; height:50px; background-color:#ff0000; margin-left:10px}
I know that I can use Javascript to achieve this, but I'd much rather find a pure CSS solution.
Thanks.
Floats do not shrink or expand to fit the available space. A floated item always uses the required space of any children.
That is what flexbox was invented for.
.flex-column-container {
flex: 1 auto 1;
}
Alternatively you could use a table layout.
Please check this fiddle if this is what you are looking for http://jsfiddle.net/Mohinder/dEwuU/
here is HTML
<div class="main">
<div class="w_200"></div>
<div class="middle"></div>
<div class="w_200"></div>
</div>
here is css
body,div{
margin:0px;
padding:0px;
}
.main {
width:100%;
text-align:center;
min-width:404px;
background:black;
float:left;
}
.w_200 {
width:200px;
background:red;
height:100px;
float:left;
}
.middle {
height:100px;
background:red;
float:left;
width: 49.2%;
width: -webkit-calc(100% - 404px);
width: -moz-calc(100% - 404px);
width: calc(100% - 404px);
margin:0px 2px;
}
Got it. If I change the paragraph to display:block instead of inline-block and change the order of the elements so that the paragraph is the last in the markup it works perfectly.
I'm trying to place a div that scrolls. I want it dead center on the page but it's not doing it with the code I provided below. Please help.
CSS
#content
{
text-align: center;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
overflow:scroll;
}
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
A div is a block level element and will not listen to text-algin. You will either need to use margin: 0 auto on the .scroll element or make the div an inline-block element. Though support for block level elements to be inline-block level elements is not totally supported so you would have to use a span for complete support. However the better option is if your div has a set width, use a left and right margin of auto on the element you want to center.
text-align only affects text. To position a <div> in the center, use
margin-left:auto;margin-right:auto.
try this
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
CSS
#content
{
text-align: center;
margin-left:auto;
margin-right:auto;
width:300px;
height:200px;
overflow: scroll;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
}
live fiddle here
You can add display:inline;margin:auto to your <div>.