I'm facing with a strange problem I can't pinpoint. I have a 3 column layout where the first 2 columns have position-fixed, so that only the third column scrolls.
The first element of each column have a margin-top of 20px (for the first and third column it's the H1 element, for the second column it's the div). For some reason, the third column does not line up with the first 2.
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">
Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
I have a simple version of it at jsfiddle, demonstrating the problem.
http://jsfiddle.net/59ez7zmy/
I can only assume that the position-fixed has got something to do with it, but I can't seem to figure it out.
When I use the Chrome developer toolbar, there is a (approx) 20px gap (although not defined by any margin) between the top of the page and the divs, and the elements inside the position: fixed columns have a 20px margin relative to the container2 div (as expected). The third column however, has a 20px margin to the top of the screen rather than the .container2 div.
Anyone knows what I'm missing here?
Specify top: 0 for .sidebar and .menu (fiddle).
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
top: 0;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
top: 0;
}
See the documentation for top
One solution is to add position: fixed on .content class:
h1 {
font-size: 1em;
margin-top: 20px;
}
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
}
.content {
margin-left: 370px;
width: 150px;
position: fixed;
}
.mediablock {
margin-top: 20px;
}
.wrapper {
position: relative;
text-align: center;
}
.container2 {
width: 550;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">
Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
Also if you don't want to use position: fixed you can use display: inline-block also in .content class:
h1 {
font-size: 1em;
margin-top: 20px;
}
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
}
.content {
width: 150px;
position: relative;
display: inline-block;
}
.mediablock {
margin-top: 20px;
}
.wrapper {
position: relative;
text-align: center;
}
.container2 {
width: 550;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
Also you have some errors in your css i fix them.
Related
I'm trying to do is have two boxes, side-by-side, that stay at 50% of the screen width each so that they stay at 50% regardless of the screen width.
However, I'm also trying to put boxes with text inside each of those boxes, but I want the inside boxes completely centered and to remain at a fixed width so that the text doesn't shift around as the screen width changes.
Anyone have any ideas? Seems like a simple thing, but I'm just getting started in CSS, so bear with me.
You can use CSS this way:
.half-screen{
box-sizing: border-box;
display: inline-block;
width: 50%
}
And then you do your logic inside those box
Note that you can use vertical-align: top; if you want them to be side by side and have the same starting point
#sides {
padding-top: 40px;
padding-bottom: 40px;
background-color: white;
}
#leftside {
width: 50%;
background-color: grey;
padding: 20px;
margin: 0px;
position: relative;
}
#rightside {
width: 50%;
display: inline-table;
background-color: #018DCA;
float: left;
padding: 20px;
margin-left: 50%;
position: relative;
}
.
.
.
<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
<div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>
A fixed size in the center of two side-by-side boxes:
.container {
height: 200px;
width: 300px;
background-color: lightgray;
font-size: 0;
}
.box {
display: inline-block;
width: 50%;
height: 100%;
background-color: dodgerblue;
position: relative;
border: solid 1px #222;
box-sizing: border-box;
}
.subbox {
height: 50%;
width: 50%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
background-color: indianred;
}
<div class="container">
<div class="box box1">
<div class="centered subbox">
</div>
</div>
<div class="box box2">
<div class="centered subbox">
</div>
</div>
</div>
I have a problem, i want to set 3 floated divs and on the bottom I would like to have a footer. So I got these two solutions, but it does not work. Please check out the image:
Here the problem is that the content is not not cleared, so the footer does not change position:
<div class="container">
<div class="left"><div class="content"><div class="right">
<div style="clear:left;"></div>
</div>
<div class="footer"></div>
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
}
.center {
float: left;
width: 80%;
max-width: 500px;
}
.right {
width: auto;
}
.content {
height: auto !important;
height: 100%;
min-height: 100%;
}
.footer {
height: 202px;
margin: -202px auto 0;
position: relative;
}
If i clear the content, I get the result that the right div goes to the next line:
thanks!
I played around a little bit. I think your html structure wasn't right for the effect you were trying to create.
Here is a new example:
HTML
<div class="container">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
<div style="clear">
<div class="content">
</div>
<div class="footer">
</div>
</div>
CSS
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
min-height: 100px;
background: red;
}
.center {
float: left;
width: 80%;
max-width: 500px;
min-height: 100px;
background: blue;
}
.right {
width: auto;
min-height: 100px;
background: green;
}
.content {
height: auto !important;
height: 100%;
min-height: 100px;
width: 80%;
max-width: 500px;
margin: 0 auto;
background: yellow;
}
.footer {
height: 202px;
margin: 0 auto;
position: relative;
background: purple;
}
I rearanged everything in this fiddle:
http://jsfiddle.net/LJQCx/2/
I hope this is what you trying to achiev.
Here is the code hope it will help check the fiddle
<div class="page-wrap">
<div class="container">
<div class="left">
<p>I am Left</p>
</div>
<div class="center">
<p>I am Center</p>
</div>
<div class="right">
<p>I am Right</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<p>I am Footer</p>
</div>
* { margin: 0;}
html, body { height: 100%;}
.page-wrap {min-height: 100%;/* equal to footer height */margin-bottom: -142px; }
.page-wrap:after { content: ""; display: block;}
.footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px;}
.site-footer {}
.container{ width:100%;}
.left{ float:left; width:25%;}
.center{float:left; width:50%;}
.right{float:left; width:25%;}
I have this HTML:
<div style="position: relative;">
<img width="100%" src="images/some.jpg">
<div class="header">
<h1>my header</h1>
Some more<br>text
</div>
</div>
This is the CSS:
.header {
color: #000000;
font-size: 52px;
left: 70%;
position: absolute;
text-align: right;
top: 0;
}
h1 {
font-size: 52px;
margin-bottom: 0;
}
Now, when I resize the page, there is 1 problem:
At some point, the text is not above the image to 100% any longer, but why?
Sooo you want it like this?
HTML
<div style="position: relative;">
<div class="header">
<h1>my header</h1>
Some more<br>text
<img width="100%" src="/image/some-image.jpg">
</div>
</div>
CSS
.header {
color: #000000;
font-size: 52px;
left: 70%;
width: 100%;
position: absolute;
text-align: right;
top: 0;
}
h1 {
font-size: 52px;
margin-bottom: 0;
}
DEMO: http://jsfiddle.net/cT7Sy/
I am trying to create a vertical line with a text in the middle. I don't know how to achieve this in css.
See image
Actually, many ways.
One of them:
html
<div class="wrapper">
<div class="line"></div>
<div class="wordwrapper">
<div class="word">or</div>
</div>
</div>​
css
.wrapper {
position: relative;
width: 250px;
height: 300px;
border: 1px dashed #ccc;
margin: 10px;
}
.line {
position: absolute;
left: 49%;
top: 0;
bottom: 0;
width: 1px;
background: #ccc;
z-index: 1;
}
.wordwrapper {
text-align: center;
height: 12px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -12px;
z-index: 2;
}
.word {
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
font: bold 12px arial,sans-serif;
background: #fff;
}
​
See example: http://jsfiddle.net/zmBrR/22/
Here's a way to do it with no background image. It's pretty reliant on a fixed height; you'd have to use display: table-cell to have it align vertically perfectly.
http://jsfiddle.net/mstauffer/uyTB7/
HTML:
<div class="container">
<div class="side">Left side</div>
<div class="or">
<div class="or-line"></div>
<div class="or-label">Or</div>
</div>
<div class="side">Right side</div>
</div>
​CSS:
.container {
padding: 1em;
}
.side, .or {
float: left;
height: 6em;
text-align: center;
}
.side {
width: 40%;
}
.or {
position: relative;
width: 20%;
}
.or-line {
float: left;
width: 50%;
border-right: 1px solid #aaa;
height: 6em;
}
.or-label {
background: #fff;
color: #aaa;
height: 1em;
left: 50%;
margin-left: -1.25em;
margin-top: 2em;
padding: .5em;
position: absolute;
text-transform: uppercase;
width: 1em;
}
​
Essentially, you're using .or-line to create a line at 50%; you're setting .or to position: relative; to contain the absolutely positioned .or-label; and you're manually positioning .or-label at 50% in the middle, and then adjusting it back across the line with a negative left margin. Then you're also expanding its size with padding and bumping it down vertically with the margin-top.
this is the solution with flex box:
https://jsfiddle.net/1z0runv9/1/
.wrapper {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
}
.or-separator {
display: flex;
flex-direction: column;
align-items: center;
color: #d3d7da;
}
.vertical-line {
border-left: 1px solid #d3d7da;
flex-grow: 1;
width: 1px;
}
<div class="wrapper">
<div class="or-separator">
<div class="vertical-line"></div>
<div>Or</div>
<div class="vertical-line"></div>
</div>
</div>
Put a <div> around the markup and use CSS like this:-
<div class="verticalLine">
some other content
</div>
in cSS:-
.verticalLine {
border-left:thick solid #ff0000;
}
OR you can try this:-
<style type="text/css">
#your_col {
border-left: 1px solid black;
}
</style>
<div id="your_col">
Your content here
</div>
You can use jquery to do the same thing. Import jquery cdn in your HTML document
select the required item and write a javascript code for that.
consider this example
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
<style type="text/css">
.completed{
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
<li>aaa </li>
<li>bbb </li>
<li>ccc </li>
</ul>
</div>
<script type="text/javascript" >
`enter code here`
$("li").click(function () {
$(this).css("color","gray");
$(this).css("text-decoration","line-through");
});
or
$("li").click(function () {
$(this).toggleClass("completed");
});
</script>
</body>
</html>
In this example line is passed over the list(li) elements.
Regardless of the question asked, i am here going for a rather simple approach in both directions.
.demo-body{
height: 400px;
}
.line-wrapper{
background: black;
width: 2px;
height: 100%;
position: relative;
}
.line-wrapper .word{
position: absolute;
background: white;
top: 50%;
transform: translate(52%,-50%);
right: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
}
.line-wrapper .word.vertical{
writing-mode: tb-rl;
}
<div class="demo-body">
<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
<div class="word">OR</div>
</div>
<br>
<!-- VERTICAL TEXT -->
<div class="line-wrapper">
<div class="word vertical">OR</div>
</div>
</div>
you can archive it by using flexbox for example
body {
position: relative;
height: 100vh;
}
.vertical {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-10px);
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
color: #999;
}
.vertical .line {
width: 1px;
flex: 1;
background: #999;
}
<div class="vertical">
<div class="line"></div>
<div class="text">OR</div>
<div class="line"></div>
</div>
This question already has answers here:
css background color with floating elements
(5 answers)
Closed 6 years ago.
I have an issue with my floated child divs not growing with my parent div. Is there a way to fix this? I need the wrapper to be 100% of the content in either div. Here is the html;
<body>
<div id="wrapper">
<div id="leftpane">
<div id="lefthead">
<div id="leftheadfiller">
</div>
<div id="leftheadlogo">
</div>
<div id="leftheaddivider">
</div>
</div>
<div id="leftcontent">
</div>
</div>
<div id="rightpane">
<div id="righthead">
<div id="rightheadfiller">
</div>
<div id="rightheadlogo">
</div>
<div id="rightheaddivider">
</div>
</div>
<div id="navigation">
Properties Careers About Blog Advertise Contact
</div>
<div id="rightcontent">
</div>
</div>
<div id="close">
</div>
</div>
</body>
And here is the css;
html,body {
background-image:url('images/background.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
background-color: aqua;
height: 100%;
width: 866px;
margin-left: auto;
margin-right: auto;
}
#leftpane {
background-image: url('images/darkbackground.gif');
width: 326px;
height: 100%;
float: left;
}
#lefthead {
height: 132px;
width: 100%;
}
#leftheadfiller {
height: 75px;
width: 100%;
}
#leftheadlogo {
background-image: url('images/index_07.gif');
width: 71px;
height: 56px;
float: right;
}
#leftheaddivider {
height: 1px;
width: 100%;
background-image: url('images/lightbackground.gif');
float: right;
}
#lefttcontent {
height: 100%;
background-color: fuchsia;
}
#rightpane {
background-image: url('images/lightbackground.gif');
width: 540px;
height: 100%;
float: right;
}
#righthead {
height: 132px;
width: 100%;
}
#rightheadfiller {
height: 75px;
width: 100%;
}
#rightheadlogo {
background-image:url('images/index_09.gif');
width: 109px;
height: 56px;
float: right;
}
#rightheaddivider {
height: 1px;
width: 100%;
background-image: url('images/darkbackground.gif');
float: right;
}
#navigation {
margin-top: 2px;
font-family: Arial, Helvetica, sans-serif;
color: #A3A3A3;
font-size: 14px;
word-spacing: 44px;
text-align: center;
width: 100%;
height: 18px;
}
#rightcontent {
padding-left: 6px;
background-color: fuchsia;
}
#close {
clear: both;
}
Is there a way to fix this? I have this set up on a temporary folder on my local server at:
http://68.113.27.229/test
The two divs that I need to force the wrapper to grow are Leftcontent and Rightcontent.
Thanks!
Add overflow: hidden to the parent div element.
If you don't want the overflowing content to be hidden, then try this:
Insert this as the last div inside the wrapper div.
<div style="clear: both"></div>