I have two divs here: http://jsfiddle.net/TXSfN/
CSS CODES:
#div1{
background-color: red;
display: inline-block;
width: 50%
}
#div2{
background-color: blue;
width: 20%
display: inline-block;
height: 263px;
float: right;
}
I'm trying to set the two divs in the same line also after zoom-in/zoom-out in browser(CTRL +/CTRL -).
The problem isn't with setting the two divs in the same line, it's with the zoom-in/out, when I zoom-in/out the div with the long content get's longer and longer with the height and the one with the short content stay as it is.
Is there a way to set the two divs in the same row for every action(zoom-in/out).
I have updated your Fiddle: http://jsfiddle.net/TXSfN/2/
Set a max-height to the 2 divs, and overflow-y: auto the first div to keep the height the same and not have the content force it to become larger.
CSS
#div1{
background-color: red;
display: inline-block;
height: 250px;
overflow-y: auto;
max-height: 250px;
width: 50%
}
#div2{
background-color: blue;
width: 20%
display: inline-block;
height: 250px;
max-height: 250px;
float: right;
}
Related
I have two elements that i always want to show in a single line. First element has 100% available width up to maximum of 350px and second has fixed with of 150px.
When width of parent (or browser) is reduced I want first element's width to get reduced to adjust both elements in same line, but second element moves to next line
Here is a sample code:
span {
height: 30px;
display: inline-block;
}
.span1 {
background: red;
max-width: 350px;
width: 100%;
}
.span2 {
background: blue;
width: 150px;
}
<span class="span1"></span>
<span class="span2"></span>
Hm ok, here is an example:
span {
height: 30px;
display: inline-block;
margin-right: -.25em;
}
.span1 {
background: red;
width: 350px;
max-width: calc(100% - 150px);
}
.span2 {
background: blue;
width: 150px;
}
I'm not sure if I understand you right. Here is a fiddle: http://jsfiddle.net/cmy45soz/
Ciao
Ralf
I'm looking for a way to devide my screen perfectly into two divs.
One small fixed sized on the left and one with dynamic width on the right.
I didn't figured out how to do this yet.
Because the width in percentage is not proportional.
For example:
http://jsfiddle.net/acmnU/2/
If you resize the result field or the overall width you see that the green
div will not resize in proportion with the screen.
If the field gets to small the green div slips under the red one.
what I need is some kind of anchor. So that the green div fill the entire screen without
getting to big.
HTML:
<body>
<div id="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS:
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
float: left;
margin-left: 10px;
background-color: green;
height: 100%;
width: 80%;
}
I hope I have interpreted your question correctly. You can try this fiddle
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
margin-left: 200px;
background-color: green;
height: 100%;
}
I have set the margin-left of the .right to equal that of the width of .left. But don't float the right panel and it will fill the remaining space.
I advise using a layout framework to ease this type of think. Bootstrap is a good one but there are lots of others.
If you want to do it manually, you need to give the Content class a width, and use relative positioning.
I am attempting to float 3 divs within a container div. I thought it would be simple but I'm having difficulty keeping them evenly spread apart. As I want the website to be somewhat responsive, so I can't have the spacing specified in px.
CSS:
#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;}
.circle{width:200px;height:200px;border-radius:100px;
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff;
line-height:150px;text-align:center;background: rgba(0,0,0,0.8);
margin:auto; display:inline-block; vertical-align:middle;
}
Thanks in advance
Hold them inside 3 div elements with a width of 33% each, and use margin: auto; on round divs, this way they will be equal.
Demo
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
CSS
.wrap_me {
width: 33%;
border: 1px solid #f00;
float: left;
}
.wrap_me div {
width: 150px;
height: 150px;
border-radius: 100px;
border: 1px solid #ddd;
margin: auto;
}
You can also hold this inside a single container with a min-width property so that your elements don't wrap incase of insufficient width
What Mr.Alien said isn't wrong, but
I'm having difficulty keeping them evenly spread apart
If you have three divs you want to distribute even along the full width of the container, you can float the left-most div to the left, the right-most div to the right and the middle div will get float:none and margin: auto, like so:
.container {
width: 300px;
height: 100px;
}
.container div {
width: 25%;
height: 100%;
background: blue;
border-radius: 100%;
}
.inner-left {
float: left;
}
.inner-middle {
float: none;
margin: auto;
}
.inner-right{
float: right;
position: relative;
bottom: 100%;
}
See the jsfiddle.
EDIT:
updated fiddle - didn't save...
Let's say I have random children in my div, which has fixed height and width set to 100% to breathe with the layout.
Which CSS must I use to force child elements to align horizontally and when the div's width is smaller then the content, display a scrollbar and not overlap one another?
Fiddle:http://jsfiddle.net/GRBc6/1/
simple css:
.parent{
width:500px;
height: 50px;
background-color: red;
}
.kid{
width: 150px;
height: 20px;
background-color: green;
float:left;
margin-left:4px;
}
if you make the kid an inline-block element and take off the float:left, you can make the parent have white-space:nowrap and it will achieve what you want:
.parent{
width:300px;
height: 50px;
background-color: red;
white-space:nowrap;
overflow-x:scroll;
}
.kid{
width: 150px;
height: 20px;
background-color: green;
display:inline-block;
margin-left:4px;
}
http://jsfiddle.net/GRBc6/6/
You need to add 2 properties to .parent: overflow-x:scroll and white-space:nowrap, and change the float property of kids to display: inline-block. Here's working code:
.parent{
width:500px;
height: 50px;
background-color: red;
overflow-x: scroll;
white-space: nowrap;
}
.kid{
width: 150px;
height: 20px;
background-color: green;
margin-left:4px;
display: inline-block;
}
or otherwise you could just use table with a single row, tr → td
So it won't let the elements inside it wrap
I have 2 div boxes. It's all working fine but when the browser is shrunk to less than 800 pixels or so, the second div moves underneath the first div. How can I force it to always stay to the right of it?
#testbox1 {
background-color: #0000ff;
min-width: 300px;
width: 30%;
height: 200px;
position: relative;
float: left;
}
#testbox2 {
background-color: #00ffff;
width: 500px;
height: 200px;
position: relative;
float: left;
}
Give the parent element a min-width: 800px;.