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
Related
Let's take the following example:
.box {
display: flex;
width: 200px;
height: 250px;
background: red;
}
.box::after {
content: "";
background: green;
width: 200px;
height: 250px;
}
<div class="box"></div>
The problem I faced, is that the first div get positioned inside the second one as you can see in this image:
How can I fix this problem to have the original div (the red one) followed by the div with the ::after selector (the green div)
You can set the parent div's position to relative, set the after pseudo element's position to absolute, and set it's left to 100% so that it'll start from the right side of it's parent container(red div)
.box {
display: flex;
width: 200px;
height: 250px;
background: red;
position: relative;
}
.box::after {
content: "";
background: green;
width: 200px;
height: 250px;
position: absolute;
left: 100%;
}
<div class="box">f</div>
fiddle
I've the following markup:
<div id="all">
<div id="one">one</div>
<div id="two">two</div>
<div id="main">main para goes here</div>
</div>
and the following css:
#all{
height: 300px;
background: red;
}
#one{
float: left;
}
#two{
float: right;
}
#main{
margin: 0 auto;
width: 250px;
}
I wanted to align vertically but no success even after using pseudo technique. Vertical alignment should work at least ie8.
Please note: I can't change the markup. It means I can't avoid using float.
So, is there any way to make it success?
Well, using CSS floats gives no chance to align the floated element vertically in their container (regardless of using CSS flexible box method).
Hence I'd go with inline-blocks so that I can align them by vertical-align: middle declaration.
So far so good, but the #two element must be positioned at the right side of the container without using CSS floats. Hence we have to specify width of the columns to reorder the columns via relative positioning:
To get this approach to work on IE8, we have to use percentage units for the width columns. Saying that we'll end up with:
EXAMPLE HERE
#all {
height: 300px;
width: 100%;
font-size: 0; /* To remove the white-space between inline-block columns */
}
#all:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
#one, #two, #main {
display: inline-block;
vertical-align: middle;
position: relative;
font-size: 16px; /* Reset the font-size to the default value */
}
#one, #two { width: 30%; }
#two { left: 40%; text-align: right; } /* Push the column to the right by 40% */
#main{ right: 30%; width: 40%; } /* Pull the column to the left by 30% */
This will work on IE8+ (not remember the requirements of IE6/7). However for IE9+ we can use calc() expression to specify the width of columns like so:
Example Here
#one, #two {
width: calc((100% - 250px) / 2);
}
#two{
left: 250px;
text-align: right;
}
#main{
right: calc((100% - 250px) / 2);
width: 250px;
background-color: orange;
}
Demo
Using flex-box
css
#all{
height: 300px;
background: red;
display: flex;
align-items:center
}
#one{
float: left;
order: 1;
}
#two{
float: right;
order: 3;
}
#main{
margin: 0 auto;
width: 250px;
order: 2;
}
Using a bit of jquery and css you can easily center the elements that you want:
CSS
div{
outline:solid gray 1px;
}
#all{
height: 300px;
}
#one{
float: left;
position:relative;
}
#two{
float: right;
position:relative;
}
#main{
margin: 0 auto;
width: 250px;
position:relative;
}
JS
function center(element){
var all = $("#all");
if(element.height()<all.height()){
element.css(
"top",
((all.height()/2)-(element.height()/2))+"px"
);
}
}
center($("#one"));
center($("#two"));
center($("#main"));
FIDDLE
http://jsfiddle.net/ovkgzmdv/5/
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;
}
I need create element, that cover whole page except 20px margin on all sides. I try this and it works in webkit browsers and Firefox, but Internet Explorer (10) and Opera have problem with this :-( . Any idea how to solve this?
HTML
<div id="first">
<div id="second">
Hello world!
</div>
</div>
CSS
head, body
{
width: 100%;
height: 100%;
}
body
{
position: absolute;
margin: 0;
background-color: blue;
display: table;
}
#first
{
display: table-cell;
height: 100%;
width: 100%;
padding: 20px;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
I'd suggest:
#first {
display: table-cell;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
Which will position the element 20px away from each of the sides. However I'd suggest not using display: table-cell; since that requires a parent element to have display: table-row which itself then requires a parent element with display: table.
Also, it looks like you're trying to emulate table-based layouts, if you could list the overall problem you're trying to solve you may get better/more useful answers.
Try a solution like this:
http://jsfiddle.net/cyHmD/
Never use position:absolute and display:table on body - leave those properties as they are since body is your base from where you build the rest of the site - at most use position:relative on body tag. box-sizing changes how the browser box model is calculated - for example instead of calculating 100% width + 20% padding + 20% border = 140% it calculates as 100% width + 20% padding + 20% border = 100%.
This solution will work from IE7 on including IE7.
head, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
background-color: blue;
}
#first
{
position:absolute;
width:100%;
height:100%;
padding:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
How about this? Simply replace required margin with border:
#first
{
display: table-cell;
height: 100%;
width: 100%;
border: 20px solid blue;
background-color: white;
}
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;.