I'm learning css right now so you may know what kind of problems are trying to blow my mind... hahaha
Okey, I'm trying to separate my web in two divs like this:
and the intention is that the right-side realize there is something at his left.
Left Side:
.left-side {
background: url('../img/mesh.png') #333;
position: relative;
top: 0px;
margin-left:0px;
width: 100px;
height: 100%;
}
Right-side: Here's the problem
.right-side {
position: relative;
margin-left: 100px;
top: 0px;
float: left; /* Trying to detect something at my left */
height: 100%;
width: 100%;
}
Both have relative positions because I read they should, maybe I'm wrong...
Just for giving you some context, on the left-side would be a navigation bar and on the right side would be all the grid and main content.
I'm using bootstrap framework for creating the grid on the right-side but the problem is that all the div's do not take their parent as a reference.
<html>
<head>
.....
</head>
<body>
<div class="left-side">
<!-- Navbar -->
</div>
<div class ="right-side">
<div class ="container-fluid">
<!-- etc -->
</div>
</div>
</body>
</html>
Thanks for reading this. I would try to fix this by my own, some help would be well recieved
You should use what Bootstrap gives you, which is span classes. What about something like this?
<html>
<head>
.....
</head>
<body>
<div class="row-fluid">
<div class="span3">
<!-- left side -->
</div>
<div class="span9">
<!-- right side -->
</div>
</div>
</body>
</html>
You probably don't need position relative. Usually the best use for that is when you need to position something absolutely inside it - that is, relative to the box you're calling relative.
To use the floats like this, you need to set the widths, and they can't be set to 100%. Doing that means they're taking up as much room as their container, which in this case looks like the whole screen. That means the right div is going to wrap below the left one, since it can't fit next to it. Start out by setting the left to width 100px and the right to width 500px, or something like that, and play with it from there.
And make the left float:left as was pointed out.
Add float: left; to left-side. So, thet element goes to left.
Related
I'm just starting to learn html and css and I've been looking at various websites to practice.
This particular website (http://jsfiddle.net/Hexapod/CWB39/260/show/) had caught my attention but I'm having trouble figuring out how the elements here are working.
If you go to the website, there are "facts boxes" that were made using div elements. These div elements however, are grouped together by a another div element. This div element has an absolute position and an offset of 0px in all directions. Can anyone explain to me what the purpose of this is?
Here's what it looks like:
#container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
<div id="container">
<div id="factbox1" class="info">
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
Thanks in advance!
PS. If I'm doing something wrong with the formatting or anything, please inform me! This is my first time posting here.
This is in place to stretch the element to the full extremes of the closest parent with position set. In this case, to extend the full height and width of the browser viewport.
Its basically telling the element that its top should meet the top side of its parent, its bottom should stretch to the bottom of its parent and the same for its left and right sides.
An alternative would be to use the below CSS:
html, body, #container{
height:100%:
width:100%;
}
The difference being that by using position:absolute the option for layering content is provided.
You can use the inset shorthand these days (not supported by IE of course)
#container {
position: absolute;
background: #002D62;
inset: 0px;
color: #fff;
}
<div id="container">
<div id="factbox1" class="info">
Full with and height 😄
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
Could someone please help me position my footer correctly in my webpage?
I have the following layout:
This is how I want the footer to behave:
The footer should be positioned at the bottom of the page when the content is empty.
The footer should be 'pushed' down when the content exceeds the height of the page.
here is my HTML:
<html>
<head>
<title>#ViewBag.Title</title>
</head>
<body>
/* This is outside of the container as I want the background
to stretch across the top of the webpage */
<div id="menu">
<div>
/* This contains an unordered list which is restyled as a series of links.
The reason it is contained in inside the menu div is because I want this
content to be centred. /*
</div>
</div>
<div id="page-container">
<div id="header">
<h1>Website title</h1>
</div>
/* This is floated to the left of the content area. */
<div id="content">
#RenderBody()
</div>
/* This is floated to the right of the content area. */
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
<div id="footer">
My footer content goes here.
</div>
Please note the following:
The content and header is contained in a 'Div' called 'page-container'.
The content is made up of two Divs which are floated to the left and right of the content area.
The menu is outside of the page-container div. This is because I want the menu background to stretch across the top of the page (like the Stackoverflow menu)
I am aware that there are many similar questions on Stackoverflow and that a Google search will return a large amount of results.
The thing I have noticed whilst trying to adapt the samples I have found is that they usually depend on a very specific html structure (E.G. everything but the footer is in a container) that does not match mine. No matter what I try I end up with something that doesn't work (E.G. the footer is positioned below the screen bounds when the content is empty or is not moved down when the content exceeds the page).
Update
I can get my footer to stick to the bottom of the page but it is not pushed down when my content expands. I think this is because my content is made up of two floating elements.
Most people seem to be pointing me to tutorials they have found on Google (as already stated I have read most of these and already attempted to adapt them).
I have come to the conclusion that I am going to have to restructure my HTML to get this to work; the point of my question was how do I do this with the HTML I already have? So much for separation of concerns!
A quick google search gave me a few links that you'll find useful.
http://www.cssstickyfooter.com/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I would stick to with the first one, but either should do what you want.
I made a fiddle: http://jsfiddle.net/karlroos/ZVkYC/ (sorry for the badly organized CSS)
Take a look. You'll have to make some workaround for the min-height: 100%; in older versions of IE, presumably with JavaScript.
As mentioned in the edit to my post, I ended up having to alter my HTML slightly:
<body>
<div id="page-container" >
<div id="menu">
<div>
</div>
</div>
<div id="layout-container">
<div id="header">
<h1>Website title</h1>
</div>
<div id="content">
#RenderBody()
</div>
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
</div>
<div id="footer">
</div>
My CSS is based on CSS found here (This same link was posted by a couple of people but I was already using this anyway!)
The solution is about 99% effective. My footer sticks to the bottom of my page when the content area is empty and is also pushed down when the content grows larger than the screen but I now have a permanent scrollbar as my page height seems to be off (moving the mouse-wheel scrolls the page up and down by a single pixel).
I have so far been unable to get rid of this so I am begrudgingly accepting this as a complete solution unless anyone else can point me in the right direction.
Update
It seems the 1 pixel offset was caused by my footer having a 1 pixel top border. I simply adjusted my CSS to account for this and the scrollbar disappears when the content does not completely fill the screen.
#footer {
margin-top: -151px;
height: 150px;
}
Try editing your CSS to include something like the following:
#footer {
width: 710px;
height: 50px;
margin: 0 auto;
padding: 40px 0 0 0;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
}
Then call it in your footer.
Wrap your div-s in a wrapper:
#wrapper {
width:100%;
height:500px;
background:#ccc;
margin:auto;
position:relative;
}
and use the following CSS for your footer:
#footer {
width: 100%;
height: 80px;
background-color: #ccc;
position:absolute;
bottom: 0;
}
Have you tried setting the body to position:relative and the footer to position:absolute with bottom:0 ?
I have a couple of list elements and in there I have 2 div's floating left. I want that when the sencond div gets more content that the div left to it automaticly gets the same height.
I have both divs in a different bg color so when 1 has less content then the other, the div gets higher and the bg dont match horizontaly.
Maby you could take a quick peek at the website, then you know exactly what I mean,
http://newsbreak.vazcreations.nl (top middle container is the problem).
Thanks in advance
This problem can be solved reasonably easily without javascript. It's recommended that you don't use javascript to achieve something if it's avoidable as not all users have javascript enabled.
The technique that is employed to solve your problem, without using javascript, is called Faux Columns (this article goes one step further and uses images, but you don't need to.
Essentially you place the div on the right inside the left div. Set the width of the left div to the ideal total width of both divs, and then float the right div to the right. You may need to apply a clearfix to the left div so that is properly wraps around the second div.
Edit: I've just come across an article which proposes a few other solutions which seem to be worth looking into.
I think something like this should work:
EDIT: This is probably a better solution
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
}
#layout {
display:table-row;
}
#left-sidebar, #right-sidebar, #content {
text-align:left;
display:table-cell;
}
</style>
<div id="container">
<div id="layout">
<div id="left-sidebar">
<!-- left sidebar-->
</div>
<div id="content">
<!-- content -->
</div>
<div id="right-sidebar">
<!-- right sidebar -->
</div>
</div>
</div>
See this jsFiddle for a demonstration: http://jsfiddle.net/Qhk7R/
You could fake it with changing this:
.recent-item {
height: 50px;
list-style: none;
float: left;
}
to
.recent-item {
height: 50px;
list-style: none;
float: left;
background-color: #CDCDCD;
margin-top: 5px;
}
and removing the top margin for .main-date and .recent-bericht
Use jQuery:
var div_1_height = $('.div-1').height();
$('.div-2).height(div_1_height);
I am writing a glossary page. I have the alphabet links on the top of the page. I want to keep the top of the page (including the alphabet links) fixed, whilst the section of the page with the definitions, scrolls up/down as an alphabet is clicked.
My HTML looks a bit like this:
<html>
<head><title>My Glossary</title></head>
<body>
<div id="top">
A |
B |
Z
</div>
<div id="term-defs">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... -->
</dl>
</div>
</body>
</html>
[Edit]
The kind of effect I am trying to create is similar to the one here. The difference being that in the example in the link, the page scrolling is done when a user clicks on a category. In my case, I want to scroll the page when an index (i.e. an alphabet) at the top of the page, is clicked.
Yes, there are a number of ways that you can do this. The "fastest" way would be to add CSS to the div similar to the following
#term-defs {
height: 300px;
overflow: scroll;
}
This will force the div to be scrollable, but this might not get the best effect. Another route would be to absolute fix the position of the items at the top, you can play with this by doing something like this.
#top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 23px;
}
This will fix it to the top, on top of other content with a height of 23px.
The final implementation will depend on what effect you really want.
You can do something like this:
<html>
<head><title>My Glossary</title></head>
<body style="margin:0px;">
<div id="top" style="position:fixed;background:white;width:100%;">
A |
B |
Z
</div>
<div id="term-defs" style="padding-top:1em;">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... ->
</dl>
</div>
</body>
</html>
It's the position:fixed that's most important, because it takes the top div from the normal page flow and fixes it at it's pre-determined position. It's also important to use the padding-top:1em because otherwise the term-defs div would start right under the top div. The background and width are there to cover the contents of the term-defs div as they scroll under the top div.
Hope this helps.
You can simply make the top div fixed:
#top { position: fixed; top: 20px; left: 20px; }
You can also use flexbox, but you'd have to add a parent div that covers div#top and div#term-defs. So the HTML looks like this:
#content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#term-defs {
flex-grow: 1;
overflow: auto;
}
<body>
<div id="content">
<div id="top">
A |
B |
Z
</div>
<div id="term-defs">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... -->
</dl>
</div>
</div>
</body>
flex-grow ensures that the div's size is equal to the remaining size.
You could do the same without flexbox, but it would be more complicated to work out the height of #term-defs (you'd have to know the height of #top and use calc(100% - 999px) or set the height of #term-defs directly).
With flexbox dynamic sizes of the divs are possible.
One difference is that the scrollbar only appears on the term-defs div.
I got a centered website with a fixed width. Now, I want to add an ad banner of fixed width/height to the right side of the page.
There is a wrapper div of width 700px. But I can't get my banner on the side. I dont know why. Can someone help me please with my CSS id?
<div class="wrapper">
<div class="head"></div>
<div class="content"></div>
</div> //wrapper
EDIT:
Image - (link removed as broken)
This is what I want. I got the orange one. I don't want to set the banner position to the right browser border. It should be near the wrapper class.
If you want the banner to be inside the wrapper:
HTML
<div class="wrapper">
<div class="banner"></div>
<div class="head"></div>
<div class="content"></div>
</div>
CSS
div.banner { float: right; width: 100px; height: 400px; }
If you want it outside the wrapper:
HTML
<div class="banner"></div>
<div class="wrapper">
<div class="head"></div>
<div class="content"></div>
</div>
CSS
div.banner { float: right; width: 100px; height: 400px; }
You can also check out this site for a bunch of different CSS/HTML layouts:
http://layouts.ironmyers.com/
Following Edit...
I think this question at Stack Overflow has what you want.
Go to this site and you will find the answer to your question and all the your future questions (judging by your question)
http://www.w3schools.com/css/css_float.asp
put the give the ad-div in the wrapper-div, give it an absolute position and move it to the right. Make sure to give the wrapper-div a relative position.
html
<div id="wrapper">
<div id="ad">ad</div>
</div>
css
#wrapper{
position: relative;
}
#ad {
position: absolute;
right: -140px;
}
The wrapper div will still be centered, the ad-div will 'hang' next to it.
Did you try using float: right property ?