I used to have tables before to display the content and people here advised me to remove tables and use CSS floating for better styling.
I am new to everything. My Problem is I have content and side bar. I want it to be displayed like
content | Sidebar
But Now with the current styling I have It is displaying like
content
|
Sidebar
Can you please correct me.
<style type="text/css">
.csscontent
{
margin-right: 500px;
}
.csssidebar
{
float: right;
width: 500px;
background: darkgreen;
/* height:500px; */
}
</style>
If I add
<div class="Content">
all the content
<div class="sidebar">
<Image>
</div>
If I add sidebar inside the content the image is getting displayed below the content leaving right-margin of 500px.
If I add sidebar outside of the content the image is getting displayed below the content.
<div class="Content">
all the content
</div>
<div class="sidebar">
<Image>
</div>
I want both content and side bar to be displayed side by side
In the HTML file you first need to set the floating elements, followed by the none floating ones. Because the floating element is going to block the entire "level" of the website and the floating elements are placed below.
So your html should look like this:
<div class="sidebar">
<Image>
</div>
<div class="Content">
all the content
</div>
Other then that it looks good.
Float both to the left so they stack up against each other.
.Content
{
margin-right: 500px;
float: left;
}
.sidebar
{
float: left;
width: 500px;
background: darkgreen;
}
Add float to .csscontent class like
.csscontent
{
margin-right: 500px;
Float:left;
}
.content, .sidebar {
float: left;
}
Floating both divs left like the above will display both inline.
You can then apply specific styling to each class. Assigning a width to .content will then determine where .sidebar appears...
Or if all you want is to float the sidebar to the right, without floating the content, you should put the sidebar above the content in the HTML.
Of course, you still need to correct the class names...
you can add a wrapper for both elements.
<div id="wrapper">
<div id="content">
all the content
</div>
<div id="sidebar">
<img/>
</div>
</div>
div#wrapper {
position:relative;
overflow:hidden;
width:800px;
}
div#content {
float:left;
width:600px;
}
div#sidebar {
float:right;
width:200px;
}
see fiddle for code and demo
fiddle: http://jsfiddle.net/g42x2/1/
demo: http://jsfiddle.net/g42x2/1/embedded/result/
SS:
Related
I'm having a problem with borders in between two divs and so I've tried a couple of different pieces of code to see if it gives me what I need; for example, I tried using a new <div > in between the divs I want the vertical border to be in, but I don't think I'm inputting the information correctly. I understand that you have to also add code to your CSS sheet but wwhat should it look like exactly? What's the proper way?
Taking this piece of code into consideration: How would I go by adding a vertical line in between the #content and the #sidebar? You could say that its a vertical line that separates both elements if it had text.
<div id="container">
<div id="header">
header content here
</div>
<div id="content">
main content here
</div>
<div id="sidebar">
sidebar content here
</div>
<div id="footer">
footer content here
</div>
</div>
=============CSS============
#container {
width: 960px;
margin: 20px auto;
}
#header {
}
#content {
float: left;
width: 620px;
}
#sidebar {
float: left;
width: 340px;
}
footer {
clear: both;
}
Here's an image as to how this code would look in text. Example with text of code given above
So basically, I'm trying to figure out how to add a border in between the left paragraph and the right paragraph.
I hope its understandable and my question is clear enough.
Thanks,
You can use border-left-style: solid; in your #sidebar or using border-right-style: solid; in your #content
I have an idea but I'm not sure how well it will work. Put 'first name' input down to the 'Access now' button as one div and define a border-left css property like so:
`.mydiv{
border-left: thick double #777;
}`
I need the footer to have an image floated to the left and some more text (an inline ul with links) floated to the right of the footer.
Here is the CSS & HTML:
footer {
clear: both;
background: #113551;
width: 90%;
margin: 0 auto;
}
.left-foot {
float: left;
}
.right-foot {
float: right;
}
<footer>
<div class="left-foot">
<p> derp 1</p>
</div>
<div class="right-foot">
<p>derp2</p>
</div>
</footer>
It works-ish, however the background color of the footer does not show up. Why not? what is the best way to fix this? It doesn't have to necessarily be exactly like this; I didn't have any luck getting this with position relative and absolute either.
for clearing float use overflow:hidden
demo - http://jsfiddle.net/b0v33rc0/1/
or add a div with styles clear:both before closing tag of the footer
demo - http://jsfiddle.net/b0v33rc0/2/
I was about to write the same as Vitorino Fernandes has written.
However you could also write like given below;
HTML
<footer>
<div>
<p id="p1"> Derp1</p>
<p id="p2> Derp2</p>
</div>
</footer>
CSS
footer{
width:100%;
background: #113551;
}
footer > div{
width:90%;
margin:auto;
}
#p1{
float:left;
}
#p2{
float:right;
}
What i have done is that I only used one div as a container of <p>.
I want to place a footer div at the bottom of the page. The problem is, I have a dynamic content, so I can not work with "position: fixed;".
The page looks something like this:
<body>
<div id="container">
<div id="navbar">...</div>
<div id="content"></div>
<div id="footer">...</div>
</div>
When I click a link in the navbar, another content is loaded with ajax and written in the "content" div. So the height of the page changes. The footer must always be at the bottom of the screen, when there is no overflow of the content and must be at the bottom of the page, when the content gets too long. How can I realize this?
with dynamic content, you can always use this:
sticky-css-footers-the-flexible-way
always helps!! :)
==================================================================================
EDIT
see this demo
CSS
html, body, #container {
height: 100%;
margin:0;
padding:0;
}
body > #container {
height: auto;
min-height: 100%;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color:grey;
}
#content {
padding-bottom: 3em;
}
HTML
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">My Dynamic Footer</div>
Note : In the fiddle, un-comment the text to see the footer stretching the height after a dynmic height content!!
Reference : Refer here
You're going to want to check out "CSS Sticky Footer": https://css-tricks.com/snippets/css/sticky-footer/
That's the solution you're looking for.
Yo can use this Structure:
position:absolute;
bottom:0;
width:100%;
height:150px;
and set
position:Relative
for its parent.
im facing a problem where i need some advice.
I want to have a couple of main div containers lets say
<div class="main">
one to another to the right.
All main containers should have full width and height (fullscreen).
On the right I need a couple other main containers with the size and width of the former.
Is it possible to set the divs one another to the right without reading and setting it with javascript? Is there a css/html solution?
Example:
<div class="main"><!--to the right one more -->
</div>
<div class="main"><!--to the right one more -->
</div>
<div class="main">
</div>
Style: #This doesn't work...
.main{
width:100%;
height:auto;
float: right;
}
I may have misunderstood the question, but try
html, body {
height: 100%;
}
body {
width: 300%;
}
.main {
height: 100%;
width: 33.333333333%;
float: left;
}
http://jsfiddle.net/3yaJZ/
hope what i've understood is what your trying to tell.. from my understanding,you want 3 div's ( main ) that will be in one bit component ( container ) each of which is 100% width and you can check each div as you scroll horizontally....
In your Css
body{
width:300%;
height:100%;
}
.main{
width:100%;
height:100%;
float:left;
}
And your html --
<body>
<div class="main"><!--to the right one more -->
</div>
<div class="main"><!--to the right one more -->
</div>
<div class="main">
</div>
</body>
sir,
i created a div tag in my html page and that displays a product.inside the product_box div i have two columns (lleft and right) using float.
both columns fit in the product_box dividing the container into two vertical halves.but when i type content in the right half the content comes out of the div if it is longer than one line.i want that i continue typing multiple lines and it fits inside the right half.
i dnt want the overflow:scroll; method or hidden as well coz the scroll bar looks very bad.
plz suggest a way to acheive this.
CSS:
#content_left .product_box {
margin-right: 10px;
}
.left {
float:left;
padding:10px;
width:178px;
height: 174px;
}
.right {
float:left;
padding:10px;
text-align:left;
width: 396px;
height: 136px;
}
HTML:
<div class="product_box">
<h3>Product Title</h3>
<div class="left">some content here</div>
<div class="right">
jhkdjfhkjhkjhkjhkhkhkhkjhkjhkjhkjhkhkhkh
</div>
<div class="cleaner"></div>
</div>
You can use min-hieght instead of height to ensure it gets minimum height and grows if the content increases...
and be sure too add float clearer like: <div style="clear:both"></div> after the floating divs... in order to make parent container take its height
Add an element at the end of your div with the style clear:both; ( and maybe height:1px; )