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>.
Related
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
I am trying to move from old html styled with tables, to html5 styled with CSS, but I have problems:
codepen Demo
You can see that, text is aligned to the edge of the page, and I want it aligned to the edge of the header banner.
I cant figure out, how to do that? without using tables.
Also, please note, that the .article:nth-child(odd) CSS selector, somehow aligns the odd elements to the left, and not to the right... I dont understand why.
Thanks!
The best way to create a fixed width website is to add a containing div:
Simply add a fixed width div around all your current code.
#Wrap{width:1024px;}
.
<body>
<div id="Wrap">
...
/* rest of website */
...
</div>
</body>
codepen Demo
CLEAN EXAMPLE
HTML
<div id="Wrap">
<div id="Head"></div>
<div id="Body"></div>
<div id="Foot"></div>
</div>
CSS
#Wrap{
width:1024px; /*Your desired page width*/
margin:0 auto; /*Center your wrapper on the page*/
}
#Head{
width:100%; /*Fill the width of the wrapper*/
}
#Body{
width:100%; /*Fill the width of the wrapper*/
}
#Foot{
width:100%; /*Fill the width of the wrapper*/
}
For example
codepen Demo
.article {
width: 1024px;
}
To center the .articles you need to set a width. Also you might want to consider getting rid of
<div align="center">
It's deprecated in html5
Your content have the same width as a header, but you have image inside header which have a little less width than 100% of site, so what u need to do is add some width for article something like this:
.article {
display: block;
margin: auto;
width: 900px;
}
codepen Demo
you need to write css to style the page correctly:
codepen Demo
div {
text-align: center;
}
I want to position a paragraph to the right of an <iframe> of a Google map.
I do not know how to show my code, so here is a screenshot of what I want:
Just use the float style. Put your google map iframe in a div class, and the paragraph in another div class, then apply the following CSS styles to those div classes(don't forget to clear the blocks after float effect, to not make the blocks trouble below them):
css
.google_map{
width:55%;
margin-right:2%;
float: left;
}
.google_map iframe{
width:100%;
}
.paragraph {
width:42%;
float: left;
}
.clearfix{
clear:both
}
html
<div class="google_map">
<iframe></iframe>
</div>
<div class="paragraph">
<p></p>
</div>
<div class="clearfix"></div>
You have two options, either float:left or display:inline-block.
Both methods have their caveats. It seems that display:inline-block is more common nowadays, as it avoids some of the issues of floating.
Read this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ or this one http://www.vanseodesign.com/css/inline-blocks/ for a more in detail discussion.
You can simply use a div to make a container and display: flex; to make the content appear side-by-side like this:
.splitscreen {
display: flex;
}
.splitscreen .left,
.splitscreen .right {
flex: 1;
}
<div class="splitscreen">
<div class="left">
Content
</div>
<div class="right">
Content
</div>
</div>
None of these solutions seem to work if you increase the amount of text so it is larger than the width of the parent container, the element to the right still gets moved below the one to the left instead of remaining next to it. To fix this, you can apply this style to the left element:
position: absolute;
width: 50px;
And apply this style to the right element:
margin-left: 50px;
Just make sure that the margin-left for the right element is greater than or equal to the width of the left element. No floating or other attributes are necessary. I would suggest wrapping these elements in a div with the style:
display: inline-block;
Applying this style may not be necessary depending on surrounding elements
Fiddle:
http://jsfiddle.net/2b0bqqse/
You can see the text to the right is taller than the element to the left outlined in black. If you remove the absolute positioning and margin and instead use float as others have suggested, the text to the right will drop down below the element to the left
Fiddle:
http://jsfiddle.net/qrx78u20/
For your iframe give an outer div with style display:inline-block, And for your paragraph div also give display:inline-block
HTML
<div class="side">
<iframe></iframe>
</div>
<div class="side">
<p></p>
</div>
CSS
.side {
display:inline-block;
}
Use either float or inline elements:
Example JSBIN
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>float example</div>
<div><div style="float:left">Floating left content</div><div>Some content</div></div>
<div>inline block example</div>
<div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div>
</body>
</html>
Like this
.block {
display: inline-block;
vertical-align:top;
}
JSFiddle Demo
You can use float:left to align div in one line.
Fiddle
You can float the elements (the map wrapper, and the paragraph),
or use inline-block on both of them.
Wrap the iframe in a class, float that left.
The paragraph with then be forced up and to the right as long as there is room for it.
Then set your paragraph to display:inline-block, and add some left margin to tidy it up.
<div class="left">
<img src="http://lorempixel.com/300/300" /> <!--placeholder for iframe-->
</div>
<p>Lorem Paragraph Text</p>
.left { float: left; }
p { display: inline-block; margin-left: 30px; }
Here's a fiddle: http://jsfiddle.net/4DACH/
Put the iframe inside the <p> and make the iframe CSS
float:left;
display:inline-block;
give your boxes the class foo (or whatever) and add the css
.foo{
float: left;
}
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:
I have a page in which a header consists of three divs - one that's floated to the left, one that's floated to the right, and one that's in between them. I'd like for that central div to be centered, yet sadly float: center doesn't exist and I can't just float it to the left and add padding as it'd have to change depending on the window size.
Is there something simple I'm overlooking? Or how would I do such a thing?
Update:
In addition, I'd like to find a way of centering that middle div in the space between the divs in case that looks better.
If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:
left-floated | right-floated | centered
Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:
margin:0 right-floated-width 0 left-floated-width
That should work.
Years later edit
Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.
You can see a very good flexbox guide here. The example you need is right here.
Indeed, the important part is that the centered div come after the left and right divs in the markup. Check out this example, it uses margin-left: auto and margin-right: auto on the centered div, which causes it to be centered.
<html>
<head>
<style type="text/css">
#left
{
float: left;
border: solid 1px red;
}
#mid
{
margin-left: auto;
margin-right: auto;
border: solid 1px red;
}
#right
{
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="mid">
mid
</div>
</body>
</html>
Here's a JS Bin to test: http://jsbin.com/agewes/1/edit
Usually you can use flexbox instead of floats:
https://jsfiddle.net/h0zaf4Lp/
HTML:
<div class="container">
<div>left</div>
<div class="center">center</div>
<div>right</div>
</div>
CSS:
.container {
display: flex;
}
.center {
flex-grow: 1;
}
The element with the centered content needs to be specified after both floated elements. After that, simply set the middle element to text-align: center. The text in the centered element will squeeze in between the floats.
See here:
http://jsfiddle.net/calvintennant/wjjeR/
Try this (make sure to use better class names):
.left {
float:left;
width:200px;
}
.right{
float:right;
width:200px;
}
.center {
overflow:hidden;
zoom:1;
}
The center div will fit between the two floats.
If you want to create a gutter between that centered div and the two floats, then use margin on the floats, not on the center div.
Because of "zoom", the CSS will not validate, but that layout will work in IE 5.5 and 6.
Note that source order is important here: the two floats must come first, then your "centered" div.
In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:
For container: position: relative
For middle div: position: absolute; left: [containerWidth - middle-width / 2]
I hope you got the idea.
A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:
.container {
position: relative;
}
.container div {
width: 200px;
background: red;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
https://jsfiddle.net/Helioz/nj548y0g/