This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 years ago.
With Bootstrap or W3 it is easy but in this application I don't want to use that to make the columns. How do I handle the columns issue withe pure css?
I need to do something like this:
I repeat... Whithout using bootstrap, w3 or any other css framework, how do I make this.
This is my simple HTML code:
<div style="width: 50px; float: left">
<< Prev
</div>
<div style="float: left">
<h1>Some Info... this is the responsive div. Always the rest of the size extracting the 50px of the other divs</h1>
</div>
<div style="width: 50px; float: left">
Next >>
</div>
You can use flexbox:
.container {
display: flex;
height: 200px;
}
.side {
width: 50px;
height: 100%;
background: purple;
}
.middle {
flex-grow: 1;
background: blue;
}
<div class="container">
<div class="side"></div>
<div class="middle"></div>
<div class="side"></div>
</div>
Related
This question already has answers here:
Display a div width 100% with margins
(6 answers)
100% width minus margin and padding [duplicate]
(6 answers)
Closed 2 years ago.
I want a margin of 5px in between my three columns of images, but every time I add the margin, the third column goes down below the first two. I've tried decreasing the width of the columns to 30%, but then they aren't perfectly in the middle. How can I solve this?
html:
<div class="rows">
<div class="column">
<img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
</div>
<div class="column">
<img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
</div>
<div class="column">
<img src="https://testcreative.co.uk/wp-content/uploads/2018/08/Test-Twitter-Icon.jpg">
</div>
</div>
css:
.rows {
margin-top: 30px;
}
.column {
float: left;
width: 33.33%;
margin: 5px;
}
.column img {
width: 100%;
}
try with calc() like
.column {
float: left;
width: calc(33.33% - 10px);
margin: 5px;
}
This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed 7 years ago.
I am having trouble overriding the parent's width within my CSS.
Essentially, I have a parent and a child div like:
.parent{ width: 768px; background-color: red; }
.child{ background-color:blue; }
<div class="parent">
<div class="child">
//content
</div>
</div>
A lot of elements still use the parents parameter of 768px width, however I wish this one specific child element to extend the entire width of the screen - I have tried doing left: 0, right: 0, clearing the floats and setting the width to auto.
I also wanted to avoid using !important if I can.
Any suggestions ?
An accurate representation of what I want would look like this:
_____
|par. |
_|_____|_
| child |
| |
|_________|
| |
|_____|
Do this, use padding and margin (margin-left and margin-right and padding-left and padding-right) to achieve this.
<div class="parent">
<p>This is parent</p>
<div class="child">
<p>This is child</p>
</div>
<p>This is still parent</p>
</div>
.parent{ width: 468px; background-color: red; margin: 0 auto; }
.child{
background: blue;
margin-left: -300vw;
padding-left: 300vw;
margin-right: -300vw;
padding-right: 300vw;
}
http://cssdeck.com/labs/full/6xljy6pz
Try this https://jsfiddle.net/7txe5eev/. This will calculate and set margin for you. I assumed you are using bootstrap but if you get the logic you can modify this to fit your code.
HTML
<div class="container">
<div class="row">
<div class="col-xs-offset-3 col-xs-6 parent">
<div class="row">
<div class="col-xs-12 divs red"></div>
</div>
<div class="row">
<div class="col-xs-12 divs green special"></div>
</div>
<div class="row">
<div class="col-xs-12 divs blue"></div>
</div>
</div>
</div>
CSS
.divs {
height: 200px;
margin: 5px auto;
}
.red {
background-color: red;
}
.green {
background-color: green
}
.blue {
background-color: blue;
}
.special {
width: 100vw;
}
JS
$(document).ready(calcMargin);
$(window).resize(calcMargin);
function calcMargin() {
var width = $('.parent').width() - $('.special').width();
var leftMargin = width/2;
$('.special').css('margin-left', leftMargin);
}
Kind of hacky, but it works (in browsers that support calc and vw): http://jsfiddle.net/tvg2ocvs/
margin-left: calc(-50vw + (768px/2));
margin-right: calc(-50vw + (768px/2));
Doesn't look nice when viewport is smaller than 768px though, but nothing a media query won't fix :)
This question already has answers here:
Align two inline-block div with content
(2 answers)
Closed 7 years ago.
Desired result: The two divs with class inline should be on the same horizontal level (the second one contains two other divs with some content).
However, as can be seen below, the two divs are not aligned vertically. If I remove the content (the word "text") from both the .inside divs, they line up as expected.
How can I make them line up? What is causing this?
.inline,
.inside {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
.inline {
display: inline-block;
background-color: chartreuse;
}
.inside {
height: 48px;
background-color: salmon;
border: solid 1px black;
}
<div class="inline">
</div>
<div class="inline">
<div class="inside">text</div>
<div class="inside">text</div>
</div>
<hr>
<div>Without content (i.e. the word "text"):<div>
<div class="inline">
</div>
<div class="inline">
<div class="inside"></div>
<div class="inside"></div>
</div>
.inline {
vertical-align: top;
}
Thanks everybody.
This question already has answers here:
How can I vertically center text in a dynamically height div?
(10 answers)
Closed 7 years ago.
I want to centre some text within a DIV vertically. However, I'm using Bootstrap and none of the conventional methods seem to work because it's within a column. Here's what I've got so far:
HTML:
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
CSS:
.innercontent {
display:block
margin:auto 0;
}
The col-sm-6 doesn't have a set height and nor does the inner because they will vary on multiple uses. The CSS is what I assumed would work but doesn't.
The effect I kinda want you can see on the live dev site here: http://dev.infiniteideamedia.com/machinima/lasthope.php but it's not perfectly centred using a less than adequate method.
This is how you center anything inside div which has dynamic height
.col-sm-6 {
border: 1px solid;
min-height: 300px;
position: relative;
max-width: 600px;
}
h2 {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0%,-50%);
width: 100%;
text-align: center;
}
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
David Walsh has written a good article on centering. Have a look at it.
Run below snippet
.innercontent {
height:400px;
background:#777;
padding-top:20%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
This question already has answers here:
Can CSS detect the number of children an element has?
(11 answers)
Closed 7 years ago.
I have an element that may contain 1, 2 or 3 subelements:
<div class="wrapper">
<div class="element" />
</div>
or...
<div class="wrapper">
<div class="element" />
<div class="element" />
</div>
or...
<div class="wrapper">
<div class="element" />
<div class="element" />
<div class="element" />
</div>
I want to apply styles to .element depending on how many siblings there are.
For example, something like...
.wrapper .element {
width: 50%;
}
.wrapper .element:only-child {
width: 75%;
}
...but I cannot figure out how to differentiate between the 2 elements and the 3 elements. Is this possible in pure css?
Thanks ( in advance ) for your help.
This is actually pretty easy to do, usually people use the data attribute [thanks #david-thomas] in html to accomplish this:
A DIV wrapper and children:
<div class="wrapper" data-wrapper-subs="3">
<div class="some-class">Child 1</div>
<div class="some-class">Child 2</div>
<div class="some-class">Child 3</div>
</div>
And its CSS:
div.wrapper[data-wrapper-subs="1"] div { width: 99%; }
div.wrapper[data-wrapper-subs="2"] div { width: 49%; }
div.wrapper[data-wrapper-subs="3"] div { width: 32%; }
div.wrapper[data-wrapper-subs="4"] div { width: 24%; }
div.wrapper[data-wrapper-subs="5"] div { width: 19%; }
div.wrapper div.some-class { /* Generic child styling */ }
The important thing is to set the data-wrapper-subs to the number of children.
If you don't know the number of children obviously this won't work, but as far as I know you can only style based on :first-child, :last-child, :only-child, :nth-child(odd), :nth-child(even) and :nth-child([number])