For example, HTML:
<div style="top:0;">January</div>
<div style="top:30px;">February</div>
<div style="top:60px;">March</div>
CSS:
div{
position:absolute;
border-bottom: 1px solid black;
}
I want to add half of the original content width before and after the content, such that I have the width of each div doubled.
The effect looks like this, workaround by manually inserting inline blocks one by one:
https://jsfiddle.net/vj25udLy/13/
If I can set the width directly as 200% of its content width or some ratio else, the job seems much simpler and more flexible.
JS/jQuery solution is welcome if there is no pure CSS solution.
A trick is to use data-attribute for the content then you add it within both pseudo-element (now you have 2x the content) then you hide one and you make the other centred:
.element {
display:inline-block;
margin:20px;
border-bottom:1px solid;
}
.element:before,
.element:after {
content:attr(data-text);
}
.element:before {
visibility:hidden;
}
.element:after {
display:inline-block;
transform:translate(-50%);
}
<div class="element" data-text="January"></div>
<div class="element" data-text="February"></div>
<div class="element" data-text="March"></div>
<div class="element" data-text="aaaaaaaaaaaaaaaa"></div>
<div class="element" data-text="bb"></div>
Another idea if you simply want to achieve the border is to use a pseudo element and make its width 200% (or left:-50% and right:-50%):
body {
text-align:center;
}
.element {
display:inline-block;
margin:20px;
position:relative;
}
.element:after {
content:"";
position:absolute;
left:-50%;
right:-50%;
bottom:0;
height:1px;
background:#000;
}
<div class="element">January</div>
<br>
<div class="element">February</div>
<br>
<div class="element">March</div>
<br>
<div class="element">aaaaaaaaaaaaaaaa</div>
<br>
<div class="element">bb</div>
Related
For some reason my (html) is not rendering proprely I have to push table#footer to the bottom. I have situation like this:
<div id="container">
<table id="footer"></table>
<div id="text"></div>
</div>
Is it possible in css to push first child element to the bottom without position absolute?
I need to keep table just after div#text.
Consider flebox and order like this:
#container {
height:80vh;
border:1px solid;
display:flex;
flex-direction:column;
}
#footer {
order:1;
margin-top:auto;
border:1px solid green;
height:20px;
width:100%;
}
#text {
border:1px solid orange;
height:20px;
}
<div id="container">
<table id="footer"></table>
<div id="text"> text</div>
</div>
I'm making a form with two input area, the second area should be content editable div somehow.
I want to make the #topic_title_input sitting above the #topic_content_input with the same width. It could be easily achieved by giving them display:inline-block, But for some complicated reason, I can't change the display-inline property of the second input area
Any idea how to make the #topic_title_input sitting above the #topic_content_input?
html
<div class="left_container">
<input id="topic_title_input" >
<div id="topic_content_input" contenteditable="true" ></div>
</div>
<div class="right_container">
</div>
<div class="clear_float">
</div>
css
#topic_title_input{
width:521px;
}
#topic_content_input{
/*do not change the display:inline */
width:521px;
display:inline;
background-color: orange;
border: solid 1px black;
}
/*do not change the css below*/
.left_container{
position:relative;
float:left; width:50%;
}
.right_container{
position:relative;
float:right; width:50%;
}
</style>
I have a two column layout with one fixed column and one column of variable size with a min-width and a max-width. The columns should be flush with each other so there is no space.
An image of what I'm looking for http://imgur.com/RQXXaoz
Here's what I tried
JsFiddle: http://jsfiddle.net/49krdtf6/4/
.superOuter
{
background-color:#C0C0F0;
padding:20px;
text-align:center;
}
.outer
{
display:inline-block;
padding:20px;
background-color:#F0C0C0;
}
.test
{
overflow:hidden;
min-width:100px;
max-width:400px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test2">
Fixed content
</div>
<div class="test">
Rest with BFC
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test2">
Fixed Content
</div>
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div>
</div>
</div>
The problem I'm having is that my variable width column will not grow to it's max-width and is stuck at the width determined by its content.
You can use display table and table-cell to achieve this. Another difference is to discard max-width and go for just width instead.
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
padding:20px;
text-align:center;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
UPDATE
After discussing in the comments, I believe you actually have a limit for both columns width, one being 400px and the other, 800px.
Something like this:
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
text-align:center;
padding:20px;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
width:800px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
Is this what you are looking for?
https://jsfiddle.net/retr0ron/
What I've done here is rearranged your content in the HTML-document (notice that there can't be whitespace between the divs where I removed it, otherwise you will see a small gap between them (because of how inline-elements behave).
HTML:
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test">
Rest with BFC
</div><div class="test2">
Fixed content
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div><div class="test2">
Fixed Content
</div>
</div>
</div>
CSS:
.outer
{
max-width:600px;
min-width: 380px;
padding:20px;
background-color:#F0C0C0;
margin:0 auto;
}
.test
{
overflow:hidden;
min-width:100px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
I'm creating a complex website, which has quite a bit of code. So I created a JS Fiddle script that re-creates the problem I'm facing.
In short, we have a main container, and in the container is a left column floated to the left and the main content column flatting to the right.
As you can see in the example, the #sideColumn is not expanding to cover 100% of the height of the #container as the #mainColumn grows. The "blue" should automatically extent from the top (as shown) all the way to the bottom of the container as the #mainColumn grows/decrease. In other words, the #sideColumn should always equal the height of the container (automatically).
Here's the Fiddle - what am I doing wrong? http://jsfiddle.net/dLyfD/
Could do something like this:
HTML:
<div id="container">
<div id="sideColumn"></div>
<div id="mainColumn">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
CSS:
#container {
width:500px;
overflow:hidden;
border:1px solid #CCC;
position: relative;
}
#sideColumn {
padding:20px 0;
width:200px;
overflow:hidden;
background:blue;
position: absolute;
height: 100%;
}
#mainColumn {
padding:20px 0;
float:right;
width:300px;
background:yellow;
}
.test {
width:250px;
height:50px;
margin:15px 25px;
background:red;
}
http://jsfiddle.net/dLyfD/1/