I have two divs under menu of site: content and right-content.Right content is sidebar which is fixed to the right side of screen,and he has a wiht 200px.Content is div for content of site and I want him to start on the left side of the screen and to stop when it reaches the right-content.Some suggestions?
HTML code of DIVs:
<div id="content">
</div>
<div id="rightcontent">
bla vlaaa
</div>
CSS code:
#content {
float:left;
position:absolute;
background-color:#ffffff;
height:500px;
}
#rightcontent {
margin-top:5px;
border:1px solid;
border-color:#ffffff;
border-radius:5px;
float:right;
position:relative;
background-color:#D4D3D0;
width:300px;
height:500px;
}
You can use a wrapping div for the content, and padding or margins to do this. For example, the style sheet could look something like this:
.div-content-wrapper {
width: 100%;
}
.div-content {
margin-right: 200px;
}
.div-rightsidebar {
width: 200px;
position: fixed;
right: 0;
top: 0;
}
And the html would look like this:
<div class="div-content-wrapper">
<div class="div-content">
<h1> This content will not go further than 200px from the right side</h1>
</div>
<div class="div-rightsidebar">
<h4>Right bar content</h4>
</div>
</div>
The right sidebar can go inside or outside of the wrapper, it doesn't really matter.
Related
I am having an issue structuring and styling my sidebar and header using the genesis theme.
I want a full width article header area with a sidebar that is aligned next to the entry content.
I have tried moving the header area to the genesis_before_content hook, but this causes the title and post info to be outside the article tag and associated schema, which is not ideal.
I have tried specifying the entry-header content to be full width in css, then setting the top of the sidebar to start x number of pixels down the page to align it with the entry-content. This has the problem that if the header text encompasses more than one line, the sidebar is misaligned to the entry-content.
Here is a fiddle of how I currently have the css arranged:
.wrapper {
background-color:#f9f9f9;
width:600px;
height:800px;
font-size:40px;
color: #FFF;
}
.content {
background-color:blue;
opacity:0.2;
float:left;
position:relative;
width:300px;
height:100%;
}
.header {
background-color:red;
opacity:0.5;
position:relative;
width:600px;
height:200px;
display:inline-block;
text-align:center;
}
.sidebar {
background-color: green;
opacity: 0.2;
width: 300px;
height: calc(100% - 200px);
float: right;
position: relative;
top: 200px;
}
<div class="wrapper">
<div class="content">
<div class="header">Title</div>
<div class="entry">Entry content</div>
</div>
<div class="sidebar">Sidebar widgets</div>
</div>
https://jsfiddle.net/j9z4tjod/
Can anyone help me find a solution?
Thanks
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!!!
Please look at this JsFiddle.
JSFiddle
<div class="main" >
<div class="menufixedleft">
Fixed Menu Should not Scroll
</div>
<div class="content">
Main Content
</div>
<div class="rightsidebar">
Right Side Bar
</div>
</div>
I am trying to have a menu div on the left fixed, content on center and sidebar on right.
It's not working when i have the center and right side bar, float left. The center div overlays the fixed div on the left.
Is my only option is to float the 2 divs(center and right sidebar) to the right ?
Thanks !
Make room for the fixed element by giving main either padding-left:100px; or margin-left:100px depending on how you want it to look (The 100px comes from how wide the fixed element is)
Updated jsFiddle
Check out this JSFiddle: http://jsfiddle.net/J2tt6/1/
Here's the CSS code:
body {
padding: 0;
margin: 0;
}
.main{
height:500px;
width:550px;
background:pink;
position:relative;
}
.menufixedleft{
height:200px;
width:100px;
position:fixed;
left:0;
top:20px;
background:green;
}
.content{
height:400px;
width:200px;
background:blue;
position: absolute; /* should not float, as fixed elements are above everything else. */
left: 100px;
}
.rightsidebar{
height:200px;
width:100px;
background:red;
position: absolute; /* once again, don't float. */
left: 300px;
}
When you set position: fixed to your left navigation, it is taken out of the layout. To keep it in, you will need to contain your menu in another element, which remains in the layout.
HTML:
<div class="main">
<div class="menu">
<div class="affix">
Fixed Menu Should not Scroll
</div>
</div>
<div class="content">
Main Content
</div>
<div class="rightsidebar">
Right Side Bar
</div>
</div>
CSS:
.menu {
float: left;
min-height: 1px;
width: 100px;
}
.affix {
height: 200px;
width: 100px;
position: fixed;
left: 0;
top: 20px;
background: green;
}
JS Fiddle
I am using http://www.cssstickyfooter.com/ for a fluid header/footer/content page.
I am trying to do a two column layout for my site. Left div navigation; the right div content.
The left column has content vertically aligned in the center. The content is both vertically-aligned in the center as well as horizontally aligned in the center.
I'm stuck at laying out the navigation.
I would think I should be able to make a div for the nav container {float:left; width:300px;display:table;} then make the nav_content div something like {height:300px; display:table-cell; vertical-align:middle;}.
I thought at first the issue was that the container needs to span 100% height of whatever was left over after the footer and then the content would be able to vertically align the height. (The only thing I can find is 'background-hacks' to achieve this and Jscript to calculate and dynamically update absolute height. It doesn't seem right to me that those are the only options.) But when I set the parent div to a set height, then try and vertically-align the content, it still does not work. I really do not understand as all the resources I have read states that the parent contains table display and table-cell can use the vertical-align middle. (does using float mess this up?)
Here is a crudely drawn layout I am trying to accomplish.
http://i.imgur.com/VefhxU7.png
Here is the idea with the code.
<div id="wrap">
<div id="header">
</div>
<div id="main">
<div id="container">
<div id="content">
</div>
</div>
<div id="side">
<div id="nav">
</div>
</div>
</div>
</div>
<div id="footer">
</div>
#side
{
background: none repeat scroll 0 0 #B5E3FF;
float: left;
position: relative;
width: 250px;
display:table;
}
#nav
{
display:inline-block;
vertical-align:middle;
height: 350px;
width:200px;
background-color: blue;
}
What am I doing wrong? Thanks for anyone who tries to help. :)
try this :
<style>
#footer {
background-color: #999;
}
#header {
background-color: #0C6;
}
#side
{
background: none repeat scroll 0 0 #B5E3FF;
float: right;
position: relative;
width: 70%;
display:table;
height: 350px;
}
#nav
{
display:inline-block;
vertical-align:middle;
height: 350px;
width:30%;
background-color: blue;
float: left;
}
</style>
<body>
<div id="mainContainer">
<div id="header">This is header</div>
<div id="nav">This is Nav</div>
<div id="side">This is side</div>
<div id="footer">This is footer</div>
</div>
</body>
Using TWBootstrap with span3 and span4 columns. I want to align the text in span3 to the bottom of image in span9. I think I have achieved this but feel I've thrown in the kitchen sink to do it. Also I don't understand why the TWB span sizes aren't working? For example how do I get the leftcol text to right aligned and to the edge of this column? Could someone please explain - I seem to be going round in circles. The example is on jsfiddle
<div class="container">
<div id="main">
<div class="row">
<div id="leftcol">
<span class="span4">
<h1>Right</h1>
<h4>Enter</h4>
</span>
</div>
<span id="mainpic" class="span8 box">
<p align="middle">green box </p> <p align="middle">representing image</p>
</span>
</div>
</div>
</div>
css
body { height: 100%; width: 100%; position: absolute; }
h1 h4 { text-align:right; }
#main { position:relative; background:red; height:400px; width:300px; }
#leftcol { position:absolute; background:blue; bottom:5px;}
#mainpic { position:absolute; background:green; top:10px; left:25%; }
.box { height: 370px; width: 300px; border: solid 10px #ccc; }
I'm wondering if you are using the right tool for the job? You've wrapped all your content in a main div that you have given a width of 300px. In addition to some other problems, at this width bootstrap collapses to a single stacked column.