So what im trying to do is have three vertical lines separating images in columns on a website however every time i go out of the editor and preview the website the position of the lines seems to change. I am not sure if this is because i have missed something or have a fault so please help me i am new to html and css
:/
div#left {
background-color: clear;
width: 50%;
height: 70%;
float: left;
border-left: 1px solid black;
top: 275px;
margin-left: 400px;
position: absolute;
}
div#leftt {
background-color: clear;
width: 50%;
height: 70%;
float: left;
border-left: 1px solid black;
top: 275px;
margin-left: -10px;
position: absolute;
}
div#right {
background-color: clear;
width: 50%;
height: 70%;
float: left;
border-left: 1px solid black;
top: 275px;
margin-left: 810px;
position: absolute;
}
<div id="container" style="background-color: clear; width: 100%; height: 80%;">
<div id="left">
</div>
<div id="leftt">
</div>
<div id="right">
</div>
</div>
I strongly recommend you to use flex positioning.
You can learn more about Flex following this link.
.container {
display: flex;
}
.container > * {
flex: 1;
text-align: center;
}
.container > *:nth-child(2) {
border: 0 solid black;
border-width: 0 1px;
}
<div class="container">
<span>item 1</span>
<span>item 2</span>
<span>item 3</span>
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I wanted to have 3 divs side by side in a HTML document and I managed to achieve it where it looks something like this:
But whenever I tried adding objects such as text or any other objects, the div is always shifting down:
Could anyone help me out on this?
Edit
Thanks for the response but i forgot that i wanted a logo at the top left, then followed by the 3 divs below the logo, but adding "flex" property to the container leads to this:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
display: flex;
border: 1px solid black;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
<!--
this is the outermost shell
-->
<div class="container">
<!-- to add a logo at the top left -->
<div class = "sun_lg">
<img src = "images/sun.png" height = "50">
</div>
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>
Just add display:flex to your container.
To learn more about flexbox read the documentation.
You can also use grid
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
border: 1px solid black;
display: flex;
flex-direction:column;
/* new */
}
.wrapper{
width: 100%;
height:auto;
display: flex;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
/* update for logo */
.sun_lg {
border: 1px solid #000;
flex: 1 1 100%;
}
<div class="container">
<!-- to add a logo at the top left -->
<div class="sun_lg">
<img src="https://via.placeholder.com/50x50" height="50">
</div>
<div class="wrapper">
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>
</div>
Define vertical-align to set the exact behavior of divs against texts baseline. I will use vertical-align:top in all child divs:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
border: 1px solid black;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
vertical-align:top;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
vertical-align:top;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
vertical-align:top;
}
<!--
this is the outermost shell
-->
<div class="container">
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>
Question 1:I learnt Holy Grail of Layouts today, after coding,the browsers show me strange format like this(not a complete black border):
[
my code is following:
#container {
border: 10px solid black;
/*this code cause the umcomplete black border*/
padding: 0 220px 0 200px;
}
.main1 {
float: left;
position: relative;
width: 100%;
background-color: grey;
min-height: 100px;
}
.left1 {
float: left;
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background-color: red;
min-height: 100px;
}
.right1 {
float: left;
position: relative;
width: 220px;
margin-left: -220px;
right: -220px;
background-color: green;
min-height: 100px;
}
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
Question 2:In my opion,if I make some changes, same layout will show but position:relative is not included.The format is still strange(content in midddle area is covered by both side areas):
.main2 {
background-color: grey;
float: left;
width: 100%;
min-height: 100px;
}
/*this is the only new code*/
#main2Inner {
margin: 0 220px 0 600px;
}
.left2 {
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
min-height: 100px;
}
.right2 {
float: left;
width: 220px;
margin-left: -220px;
background-color: green;
min-height: 100px;
}
<div id="container2">
<div class="main2">
<div id="mianInner">this is paragraph 4 I dont know why some content cannot be displayed</div>
</div>
<div class="left2">this is paragraph 5</div>
<div class="right2">this is paragraph 6</div>
</div>
You are dealing with floating elements overflowing their container. You may use overflow:hidden (or position/float, display) to modify the block formating context (BFC).
#container {
border: 10px solid black;
overflow: hidden;
/*keyword : Block Formating Context */
padding: 0 220px 0 200px;
min-width: 500px;
;
}
.main1 {
float: left;
position: relative;
width: 100%;
background-color: grey;
min-height: 100px;
}
.left1 {
float: left;
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background-color: red;
min-height: 100px;
}
.right1 {
float: left;
position: relative;
width: 220px;
margin-left: -220px;
right: -220px;
background-color: green;
min-height: 100px;
}
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
Flex or table display would be more reliable in my own opinion
#container {
border: 10px solid black;
display: flex;
min-height: 50px;
box-sizing: border-box;
}
.main1 {
background-color: grey;
flex: 1;
}
.left1 {
order: -1;
width: 200px;
background-color: red;
}
.right1 {
width: 220px;
background-color: green;
}
#container2 {
border: 10px solid black;
height: 50px;
/* will grow taller if needed */
display: table;
width: 100%;
box-sizing: border-box;
table-layout: fixed;
}
#container2 > div {
display: table-cell;
}
<h1>display:flex</h1>
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
<hr/>
<h1>display:table</h1>
<div id="container2">
<div class="left1">this is paragraph 1</div>
<div class="main1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
First of all, it's different from others questions because I can't use position: absolute; as I used usually because of my jQuery plugin (I don't use this plugin in the example, but I have to do position: relative; to the inside-table).
JSFIDDLE: https://jsfiddle.net/h8ywumbk/
HTML:
<div id="table">
<div id="inside-table" >
<span>Hello</span>
</div>
</div>
CSS:
#table {
width: 100%;
height: 100px;
border: solid 1px black;
background-color: transparent;
}
#inside-table {
position: relative;
width: 98%;
height: 80px;
background-color: transparent;
border: solid 1px black;
margin: 0 auto;
margin-top: 10px;
}
#inside-table span {
position: relative;
top: 50%;
transform: translateY(-50%);
}
I'm trying to center the text (not a single line) vertically and horizontally on the tables. Any suggestions?
Just use flexbox
#table {
width: 100%;
height: 100px;
border: solid 1px black;
background-color: transparent;
}
#inside-table {
position: relative;
width: 98%;
height: 80px;
background-color: transparent;
border: solid 1px black;
margin: 0 auto;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
#inside-table span {
}
<div id="table">
<div id="inside-table">
<span>Hello</span>
</div>
</div>
Try this:
.table {
display: table;
width: 100%;
}
.td {
display: table-cell;
vertical-align: middle;
}
<div class="table">
<div class="td">
text
</div>
<div class="td">
<img alt="" src="http://url style="width: 120px; height: 148px;" />
</div>
</div>
I got it centered like this:
#inside-table span {
position: relative;
top: 50%;
left: 50%;
}
You can always mess with the percentages if you want it shifted one direction or another
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is.
Like this: http://s7.postimg.org/tvmmw91jf/theboxes.png
Fiddle: http://jsfiddle.net/NightSpark/1L5027qr/
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
Update: I put in a clearer illustration above than the one I had at first.
The easiest thing you could do to center the elements is using CSS Flexbox.
Here's the HTML :
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
</div>
Here's the CSS :
#footer {
display: flex;
flex-direction: row;
justify-content: space-between;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
Here's a Fiddle : http://jsfiddle.net/1L5027qr/1/
You can create a 25% width around each div.
<div id="footer">
<div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox1">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox2">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox3">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox4">
</div>
</div>
</div>
If you are able to modify the mark-up a little:
<div id="footer">
<div id="fbox1" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox2" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox3" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox4" class="outer">
<div class="inner">...</div>
</div>
<div>
CSS:
#footer {
width: 100%;
clear:both;
}
#footer .outer {
width: calc(100% / 4 - 4px);
text-align: center;
display: inline-block;
margin: 0px;
border: 0px;
}
#footer .inner {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
display: inline-block;
}
Fiddle: http://jsfiddle.net/simbunch/wcvb88yg/
I would like to implement timeline part on my website.
I have picture how it should look but I can't think any good way to do it.
How it should look:
Actual code:
js fiddle
<div class="right ">
what should I put here to get that circle?
</div>
Most confusing part is how to get that circle and that line together?
Could anyone suggest anything?
Thank you.
You could use :after, changing the styles to your liking.
.border needs to be positioned non-statically.
.wrapper {
width: 1030px;
background-color: #534741;
height: 500px;
}
.right {
color: #fff;
width: 90%;
text-align: right;
padding: 10px 10px 0 0;
display: block;
}
.border {
border-bottom: 2px solid #000;
width: 50%;
float: right;
margin: 10px 140px 0 10px;
position: relative;
}
.border:after {
/* Position and border */
display: block;
content: '';
border: 2px solid #000;
position: absolute;
width: 32px;
right: -34px; /*** -(Width+Border) ***/
height: 32px;
bottom: -18px; /*** -((Height/2)+Border) ***/
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.text {
float: right;
width: 300px;
margin-right: 90px;
}
<div class="wrapper">
<div class="right">
<h2>Text</h2>
</div>
<div class="right">
<h3>2014</h3>
</div>
<div class="right "></div>
<div class="right border"></div>
<div class="right text">
<p>Lorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum dolorem</p>
</div>
</div>
JSFiddle
Try to make it with positioning and borer radius. Or simply use images.
.content-wrapper {
position: relative;
width: 400px;
margin-bottom: 30px;
}
.line .circle {
width: 50px;
height: 50px;
border-radius: 25px;
border: 1px solid black;
position: absolute;
top: -25px;
}
.line {
position: relative;
border-bottom: 1px solid black;
}
.odd .line {
margin-right: 50px;
}
.even .line {
margin-left: 50px;
}
.odd .circle {
right: -50px;
}
.even .circle {
left: -50px;
}
.content,
.header {
padding: 0 60px;
}
.odd .content,
.odd .header {
text-align: right;
}
.even .content,
.even .header {
text-align: left;
}
<div class="content-wrapper odd">
<div class="header">Some title</div>
<div class="line">
<div class="circle"></div>
</div>
<div class="content">Loerm ipsum dolerom</div>
</div>
<div class="content-wrapper even">
<div class="header">Some title</div>
<div class="line">
<div class="circle"></div>
</div>
<div class="content">Loerm ipsum dolerom</div>
</div>
Below code should work:
.box-with-circle {
width: 90%;
position: relative;
}
.box-with-circle .circle {
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
margin -20px 0 0 -20px;
border: 1px solid #000;
background-color: #fff;
z-index: 1;
border-radius: 50%;
}
.box-with-circle hr {
position: relative;
top: 20px;
}
<div class="box-with-circle">
<div class="circle"></div>
<hr />
</div>