Using twitter-bootstrap-2.0.4
...some topbar code here....
div.container-fluid
div.content
div.row-fluid
div.span2
div.menuLeft
a(class='menuLeftItem', href="http://localhost:3000") Explore
br/
a(class='menuLeftItem', href="http://localhost:3000") My Playlists
br/
a(class='menuLeftItem', href="http://localhost:3000") Challenge
br/
a(class='menuLeftItem', href="http://localhost:3000") Socialize
br/
My CSS:
* { margin: 0; padding:0; }
html, body {
background-color: red;
height: 100%;
width: 100%;
overflow: hidden;
}
body {
padding-top: 58px; /* 40px to make the container go all the way to the bottom of the topbar */
padding-left: 0px;
padding-right: 0px;
}
.container-fluid {
background-color: black;
}
.content {
background-color: blue;
}
.span2 {
background-color: green;
}
.menuLeftItem {
color:white;
/*font*/
font-size:13px;
font-weight:bold;
line-height:1;
border: 1px solid white;
}
My menuLeftItems are not aligned properly. Specifically the borders of those elements are overlapping. Please tell me how to properly align the elements. Also I want to each menuLeftItem to take the same width as its containing element span2. I tried width = 100% for .menuLeftItem. But it does not take effect.
My goal is to create a fixed page layout for different screen sizes. Hence I am trying to used fluid layouts.
Any help is appreciated
Ok Fixed it. I needed to add display: inline-block to the class menuLeftItem. I found this as reference on another stack thread
HTML/CSS - Extend element width to visible area (beyond width of containing element)
Related
I'm struggling with a problem which seems simple:
My code:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
width: 100%;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The box contained in the wrapper has a fixed size, which might overflow the wrapper on small screens. Why doesn't the wrapper wrap around the box? How would I do that?
You can also check out the issue in this jsFiddle.
In order to make this work:
Remove width: 100% and add to the wrapper display: inline-block.
Doing so, will enable the wrapper to have as much width as needed to wrap around the box. Putting width: 100% restricts your wrapper to the width of the screen and in case of the box having a bigger with than that of the screen, it won't work.
If you do not want to have a horizontal scrollbar, especially on narrower screens use: box-sizing: border-box on the wrapper.
CSS:
.wrapper {
display: inline-block; /* Ensures that the box stays wrapped */
padding: 10px;
background: white;
box-sizing: border-box; /* Ensures that there won't be a horizontal scrollbar */
}
Here is a working version of your jsFiddle, with both the wrapping issue mended and the horizontal scrollbar abolished.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
box-sizing: border-box display: inline-block;
padding: 10px;
background: white;
}
.box {
position: relative;
margin-top: 40px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
For reference:
display: inline-block;
box-sizing: border-box;
Use display:inline-block on the wrapper to resize the container based on the content inside.
The div element by default has display:block; so you need to change its display.
You should remove width:100%; from .wrapper class, then you can make it display:inline-block; or display:table;
*{
font-family:tahoma;
}
body{
background:#333;
}
.wrapper
{
padding:10px;
background:white;
display:inline-block;
}
.box
{
margin-top:40px;
width:1100px;
height:400px;
background:#aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
Your problem occurs, because HTML documents, by default, display all elements as display: block.
There are two ways to do it as our friends have mentioned before.
First one is to use inline-block value for the display property:
body{
display: inline-block;
}
The second way is to use max-width:
div.wrapper{
max-width: 100%;
/*we have set height property to auto to have coefficient between width & height*/
height: auto;
}
For more information visit these webpages:
inline-block
max-width
You can solve the problem by using the following css:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
display: inline-block;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The only change is I have added display: inline-block to .wrapper element.
Why wrapper doesn't wrap around the child div
The problem is all html element has some default CSS styling which gets applied by the browser.
In this case div gets a default property of display: block; It is the same property that makes a default unstyled div to take up full available width of it's parent element.
As you can see with this: snapshot of chrome dev tools
*The css style highlighted in red rectangle is the default styling applied by the browser.
*The red underlined text tells us about the width of the element. The fading out signifies that value of that property is computed by the browser.
** While we are at it I want to point you to a different problem that you might have faced with the previous code and if the goal was to make the wrapper to wrap box at all times.
If the .box div would have width far less than that of the width of the browser then another problem may arise which I have shown in the code snippet bellow.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
}
.box {
margin-top: 40px;
width: 100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
As you can see the box tries to cling to a side of wrapper.
You can read more about display css property here: CSS display property || CSS-Tricks
i am working on an internal web page, the page have a wrapper DIV as recommended by a tutorial online.
inside the wrapper there is : header, mainnav, content, sidenav and footer.
The content and sidenav are two side by side DIVs .
The side bar contain a menu that is usually changed.
My problem is that i want to make the content DIV with the same height as the sidenav.
here is my CSS for the two DIVs
#content {
width: 75%;
float: left;
padding-top: 5px;
height: 100%;
}
#sidenav {
width: 25%;
float: right;
}
and this is the CSS for the wrapper
#wrapper {
background-color: #FFFFFF;
width: 100%;
min-width: 740px;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
-webkit-box-shadow: 0px 1px 20px #999999;
box-shadow: 0px 1px 20px #999999;
}
Give both of them the following attribute:
height:100%;
They should fill the entire height of the wrapper div, if you give it a specific height. I'd also suggest adding another div after them, and then style it as below to prevent either from creeping past it:
width: 100%;
clear: both;
height 100% doesnt work if you dont have a parent with a defined height. I dont know why you want the same height? If it is for a background color just add it to your wrapper and overwrite the sidebar for example.
In the future you might want to checkout a framework to overcome problems like this. bootstrap is a good one to start with.
https://jsfiddle.net/dtz8cmnt/1/
.column {
float: left;
width: 33%;
}
.menu {
background:red;
}
.content {
background:blue;
}
.clear {
clear: both;
width: 100%;
}
In the Fiddle you find an example where a clear is used. Note that the colums do not have the same height.
I'm trying to recreate a website and position the icons in a certain way. Currently I have a black nav bar on the left with icons. I want the black nav bar to extend all the way to bottom of the page and I also want the icons to be separated.
Here is the CSS code:
#left_nav {
border: solid black;
}
#left_nav i {
color: gray;
padding-right: 35%;
padding-left: 35%;
margin-top: 60%;
}
HTML code:
<div id="left_nav" class="grid_2 alpha">
<i class="ss-icon">home</i>
<i class="ss-icon">time</i>
<i class="ss-icon">user</i>
<i class="ss-icon">question</i>
<i class="ss-icon">play</i>
</div>
http://jsfiddle.net/fmpeyton/3L5YV/
A few things:
Inline elements (i.e. <i>) cannot have a margin. You'll have to make the element a block level element via display:block;
In order for the sidebar to reach the whole page, you can set its height to 100%, but only after setting the height of its parent (in this case, the BODY and concurrently HTML elements) to 100% height.
CSS:
html, body{
height: 100%; // height declared so child #left_nav can expand to this height
}
#left_nav {
border: solid black;
height: 100%; // will expand to height of parent
}
#left_nav i {
display:block; // added display:block; to allow for margin
color: gray;
padding-right: 35%;
padding-left: 35%;
margin: 10px 0; // only available to block level elements
}
I feel this question has been answered but I searched and searched and no answer seems to deal with dynamic main content width.
I simply want this scenario:
|-|nav|-|main content|-|
Where nav is a DIV and main content is a DIV and both are placed inside another DIV container which has a width of 100%. - is simpy a spacing between the DIVs, a margin.
nav has a fixed width of 300px and "main content" div should always take the rest of the space available (to fill the 100% of the parent div) - without the use of JavaScript.
Also I want to have some margins left and right of each DIV (nav, main content) so that they have some space between them and the "browser border"/body.
I experimented with table, table-cell but the border-collapsing drove me nuts so I am heading back to god old "float: left" and clearfix. This is what I have so far:
<div id="container" class="cf">
<div id="nav">
Nav stuff
</div>
<div id="main">
Main stuff
</div>
</div>
#container {
padding: 0;
width: 100%;
background-color: orange;
min-height: 50px;
}
#nav {
display: inline;
float: left;
min-width: 300px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
}
#main {
display: inline;
float: left;
background-color: green;
margin-right: 10px;
}
.. /* clearfix stuff omitted (class 'cf') */
So now the problem is, how to make "main content" (#main) fill the rest of the parent (#container). If I use a width of 100% the 100% is of course the full width of the parent and the div will go under the "nav" div. If i use "auto" the same thing happens. It of course works if I pass in a fixed width e.g. in pixels but I don't know the correct pixels in advance and using JS to calculate that seems a bit odd to me.
I've seen a solution where the "nav" was put inside "main" but that leads to problems with the margins. Try to insert a margin to create some space beside a div that is inside another div... I don't think that's anyhow possible in this universe.
Thanks for your help!
Maybe you should create BFC to face this problem.
For example:
#container{
border: 1px solid red;
}
#nav{
float: left;
width: 300px;
border: 1px solid green;
height: 200px;
margin-left: 20px;
margin-right: 20px;
}
#main{
overflow: hidden;
height: 400px;
border: 1px solid blue;
margin-right: 20px;
}
overflow: hidden; is the key to create BFC for #main.
JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/
More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
For example:
#container {
width: 100%
position: relative;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 300px;
}
#main {
margin-left: 320px;
}
JSFIDDLE
I am having issues with the below HTML when resizing the window;
1: Right bar suddenly drops down when the width is resized too small.
2: Spacing between the content and right bar gets larger as the width gets larger.
<style type="text/css">
#content {
width: 80%;
float: left;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="content">contents</div>
<div id="rightbar">
link 1
link 2
link 3
</div>
There are two ways to get the result you want:
put the right bar before the content
in the html, remove the width from
the content and give it a right
margin instead (width of the right
bar + something extra)
position the right bar absolutely on the right, remove the width from
the content and give it a right
margin instead (see number 1.)
By the way, the problem is that you are mixing absolute and relative widths and what you see is exactly what you are supposed to see.
Edit: After re-reading your question, I think that with overflow:hidden (makes it a nice square block) on the content part, you can get it to work in combination with 1. without the margin:
<style type="text/css">
#content {
overflow: hidden;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="rightbar">
link 1
link 2
link 3
</div>
<!-- content needs to be placed after rightbar -->
<div id="content">contents</div>
Once you resize too small, the percentages width will be smaller than the text content within your element. The browser cannot concatenate words, so the element is forced to have a min-width. Try putting the elements in a wrapper with an assigned min-width.
Between these two bars you have a space of 3%. 3% of 1000px is 30px. 3% of 2000px is 60px. Therefore if you right element is floating right, it makes sense you'll see that additional space. Try floating the element left.