There's some questions about this but I haven't found a good answer. Been looking for a couple hours now.
Here's my jsfiddle:
http://jsfiddle.net/foreyez/Mr2ER/
I have some simple markup:
<div class='container'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
and CSS:
.container {
white-space:nowrap;
}
.box1 {
width:200px;
height:200px;
background:red;
float:left;
}
.box2 {
width:200px;
height:200px;
background:green;
float:left;
}
.box3 {
width:200px;
height:200px;
background:blue;
float:left;
}
Yet the boxes still wrap when the window is small enough. Any suggestions?
Note: I want to keep this float:left, so no inline-block solutions please.
If you add width:600px; to the .container it will force them to stay inline.
Here's your updated JSFiddle
Give #container a width at least as large as the child divs:
.container {
white-space:nowrap;
width:9999px;
}
jsFiddle example
Related
Hello all CSS newbie here,
I have a special case, where I want to position a text area on the edge of a div. I want the text area to be cropped even when a user types into the text area. I'm deeply confused on why does the textarea grows and pushes the position of the parent div even though I have set the parent div overflow to hidden ? Any ideas so that the textarea position stays as is (cropped)?
My code is as below:
HTML
<div class="wrapper">
<div class='box'>
<textarea class="text"/>
</div
</div>
CSS
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
width:300px;
height:50px;
right:-250px;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
Here is the link to my Codepen
Thank you and deeply appreciate any thoughts and suggestions.
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
max-width:300px;
height:50px;
right: 0;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
<div class="wrapper">
<div class='box'>
<textarea class="text"></textarea>
</div>
</div>
Your html code is not correct. And I used max-width for textarea.
Long challenge I have had, and I just need to ask for help now.
I have a container for divs:
<div id="container">
<div id="1">Bla</div>
<div id="2">Bla</div>
<div id="3">Bla</div>
<div id="4">Bla</div>
<div id="5">Bla</div>
</div>
Now, div 1 and 2 should be fixed and floating on the left. Width 50%. All the other divs, should be on the right and just continue to float on the right no matter how long and how many divs I add. Width is also 50%.
Im thinking of something like this:
|--1--|--3--|
|--2--|--4--|
|-----|--5--|
|-----|--6--|
|-----|-----|
Any tips? I am just confused on relative and absolute and what is supposed to float where...
I should add, div 1 and 2 should be "scroll" fixed. So position: fixed. Its a bit how the facebook newsfeed is strcutured.
Any help is greatly appreciated. :)
I think i solved your problems. You can use this code for your problem it may be help me.You can add many div in second column but you should use this width:50%; background:pink; float:left; margin-left:50%; css code. You can change background according to you.
Live Working Demo
HTML Code:
<div id="container">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="seven">7</div>
</div>
CSS Code:
#container
{
width:100%;
height:100%;
}
#one
{
width:50%;
background:red;
}
#two
{
width:50%;
background:green;
float:left;vertical-align:top;
}
#three
{
width:50%;
background:blue;
float:left;
margin-top:-20px;
}
#four
{
width:50%;
background:gray;
float:left;
margin-left:50%;
margin-top:-20px;
}
#five
{
width:50%;
background:violet;
float:left;
margin-left:50%;
}
#six
{
width:50%;
background:gold;
float:left;
margin-left:50%;
}
#seven
{
width:50%;
background:pink;
float:left;
margin-left:50%;
}
Result:
Im busy making this website homepage but have come across a problem which must be so simple but i just can't find it anywhere, I want to position both 'topskin' and 'topskin2' next to each other, i will also be adding more which i also want next to each other.
Here is the HTML :
<div id="secondinner">
<div id="topskin">
</div>
<div id="topskin2">
</div>
This is the third segment to the home page.
</div>
Here is the CSS:
#secondinner {
padding-top:300px;
width:980px;
margin:0 auto;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
}
Just to inform you, i have tried float:left, on both elements, and instead of going below each other they simply disappear.
I see at your image, your element are floarting out of div. You must set overflow:hidden to their parent to avoid that.
#secondinner {
overflow:hidden
}
Each child must be floated:
#topskin, #topskin2 {
float:left
}
There are two ways doing that.
Use float:left on #topskin and topskin2
use display: inline-block; on #topskin and topskin2
Try to use float.
FIDDLE
#secondinner {
padding-top:300px;
width:980px;
margin:0 auto;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
border:2px solid;
float:left;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
border:2px solid;
float:left;
}
You just have to add display: inline-block..
With this code, even if you add as many as images with div having class img-container they will appear inline.
Here's working code for you.
<div id="secondinner">
<div id="topskin" class="img-container">
</div>
<div id="topskin2" class="img-container">
</div>
This is the third segment to the home page.
</div>
img-container is class having following css property.
.img-container{
display:inline-block;
}
JSFIDDLE DEMO : http://jsfiddle.net/rahulrulez/5mnxqphx/
So I made this example here: http://jsfiddle.net/cRmCc/2/ and I was wondering what would be the best way to vertically and horizontally align nested divs inside a parent div with out using margin or padding. More preferably the exact center. I'll be using this as a reference and Google isn't that much of a help. Thanks!
HTML
<div class="container1">
<div class="container2">
Some Text
</div>
</div>
CSS
.container1 {
width:200px;
height:200px;
background-color:red;
}
.container2 {
width:100px;
height:100px;
background-color:blue;
}
You can use display:table-cell; and vertical-align:middle; along with text-align:center; and display:inline-block;
Updated Fiddle
.container1 {
width:200px;
height:200px;
background-color:red;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.container2 {
width:100px;
height:100px;
background-color:blue;
display:inline-block;
}
Note: You will need a fallback for older browsers, if supported.
I have a div containing a span and I want the span to vertically and horizontally align to the center of my div.
Here's the fiddle : http://jsfiddle.net/RhNc2/1/
I've try margin:auto on the span and the vertical-align on the div, but it's not working
EDIT : My div and my span don't have a fixed height, it depends of the content, i've put it fixed on the fiddle just to show you
Add this to the div CSS:
display:table-cell; text-align:center
working fiddle is here: http://jsfiddle.net/sdoking/DCT85/
CSS:
#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell;
text-align:center
}
#mySpan {
width:100%;
border:thin blue solid
}
Borders are for clarity :)
Vertical alignment is a tricky business, and I don't know if there's one tried-and-true way. The most reliable technique available in the last couple of years is to use a CSS table layout. The only downside to this approach is that it may not work on outdated browsers. Still, in my experience this is probably the best overall solution. See my example below:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/aGKfd/2/
There's another technique, but it's not as foolproof as the above technique. It involves two containers, with the outer container's position set to relative and the inner set to absolute. Using absolute positioning on the inner container you can get close, but it requires some tweaking to get it just right:
<style type="text/css">
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/6SWPe/
use line-height = height:
http://jsfiddle.net/RhNc2/8/
You can also just apply these styles to the containing <div>. The line-height solution assumes you only need one line of text to be centered though.
#myDiv{
border:1px solid black;
height:50px;
width:200px;
text-align:center;
line-height:50px;
}
Here it is
#myDiv{
border:1px solid black;
height:50px;
width:200px;
}
#mySpan{
display:block;
text-align:center;
line-height:50px;
}
And the jsFiddle: http://jsfiddle.net/Simo990/RhNc2/9/
Edit: since your div and span height depends of the content, my solution will not work, because it needs fixed height and only one row of text. Just look for a solution with position:absolute.