Why wont my divs float? Content1 and Content2 should sit side by side. What am I missing? I am sure that it is something simple. i am obviously very early on in this project, so no need to correct all the other crap :).
Here is my css:
body {
margin: 0;
background-color: #cccccc;
}
#header {
width: 100%;
height:90px;
background-color: #999999;
}
#container {
margin-right: 20%;
margin-left: 20%;
width: 1000px;
}
#content1 {
width: 300px;
float: left;
}
#content2 {
width: 405px;
float: left;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:90px;
background-color: #999999;
}
Here is my html:
<div id="header">
My Personal Page
</div>
<div id="container">
<div id="Content1">
<img src="http://localhost:8888/portrait.png" height="400">
</div>
<div id="Content2">
<img src="http://localhost:8888/portrait.png" height="400">
</div>
</div>
<div id="footer">
Copyright Information
</div>
Because you wrote your id's wrong. The name of the ID must be excactly the same as the name in your css sheet. In html you have Content1 with an uppercase C while in your css you have content1 with a lowercase c. This same scenario you have with Content2(html) and content2(css).
Your html: (Wrong)
<div id="Content1"> && <div id="Content2">
New html: (Right)
<div id="content1"> && <div id="content2">
DEMO
Related
Hello I am just making a base template to help me make a website a lot better, I have just recently started using bootstrap and have noticed that when I resize my browser (for example to a mobile size) it is overlapping on my footer?
Does anyone know why this is happening?
Here are some images of when I add more text or resize:
Like I say I am fairly new to bootstrap and am most likely doing something really stupid which is easy to fix :)
Here is my css:
html, body { height:100% }
nav {
margin: 0;
padding: 0;
}
div {
display: block;
}
.col-centered {
float: none;
margin: 0 auto;
}
.center {
margin-left:auto;
margin-right:auto;
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
.container {
width: 100%;
margin: 0;
padding: 0;
height:100%;
background:red;
}
.content {
padding: 5rem 1.5rem;
text-align: left;
height:90%;
width:75%;
margin:0 auto;
background: green;
}
footer {
background: grey;
height:10%;
width:75%;
margin:0 auto;
}
Here is my main HTML:
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<?php include "footer.php" ?>
EDIT: I forgot to include the footer, if you think that I need to add this for you then please let me know.
Thank you very much for even looking at this post!
EDIT 2:
Here is the code for my footer:
<footer>
<div class="row">
<div class="col-md-auto">
<p class="float-right">Back to top</p>
<p>© 2017 Company, Inc. · Privacy · Terms</p>
</div>
</div>
</footer>
Here is the link to the website:
http://81.131.193.35/
Remove the height of .content
.content {
padding: 5rem 1.5rem;
text-align: left;
width: 75%;
margin: 0 auto;
background: green;
}
and also remove the height of .container
.container {
width: 100%;
margin: 0;
padding: 0;
background: red;
}
I would wrap the footer.php in a pair of divs and apply a row and col-md-auto class to it. It looks like the footer is maybe styled with an absolute or even a static display. This is making the footer not play along with the other divs
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-auto">
<?php include "footer.php" ?>
</div>
</div>
</div>
How can I produce a div that will have the following layout so I could make its contents to adjust when is resized? How should i structure this, so I could make use of media queries? Do I need to have another div that will wrap all of this?
+-----------+---------------------------------------+
+ + Title +
+Image + Description +
+ + +
+-----------+---------------------------------------+
+Another container +
+ +
+---------------------------------------------------+
Update:
Used both answers and came up with
http://jsfiddle.net/EzV4R/10/
If you want to make the most of CSS3 and do away with inline styles (bad) and floats, try:
Demo Fiddle
It has the added benefits of:
Resizing with the page
Minimizing the cell containing the image to only the image size (width)
HTML
<div class='table'>
<div class='cell'>Image</div>
<div class='cell'>Title<br />Description</div>
<div class='caption'>Another container </div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
}
.cell :first-child{
width:1%;
}
.caption {
display:table-caption;
caption-side:bottom;
}
.cell, .caption {
border:1px solid black;
}
I always like to wrap structures but it is not necessary, so I would try this:
HTML
<div id="main" class="wrapper">
<div id="topleft" class="left"></div>
<div id="topright" class="right"></div>
<div style = "clear:both">
<div id="container"></div>
</div>
CSS
#main {size that you want}
#topleft {size that you want}
#topright {size that you want}
.left { float: left; }
.right { float: right; }
#container { width: 100% }
<div id="topleft" style="float:left">TOPLEFT</div>
<div id="topright" style="float:right">TOPRIGHT</div>
<div id="container" style="clear:both">CONTAINER</div>
Try this:
<div >
<div style="float:left width:50%">Image</div>
<div style="float:right width:50%">
<div >Title</div>
<div >Description </div>
</div>
</div>
<div style=" width:100%">Another container </div>
<div id="main">
<div id="logo"></div>
<div id="desc"></div>
<div id="clr"></div>
<div id="content"></div>
</div>
CSS :
#main {margin:0;padding:0;}
#logo {width:20%;float:left;}
#desc {width:80%;float:left;}
#clr{width:100%;clear:both;}
#content{width:100%;}
<section>
<div class="inlineImg">
<!-- image -->
</div>
<aside>
<h3>Title</h3>
<p>Description</p>
</aside>
</section>
<section id="other">Another Container</section>
CSS:
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
overflow: hidden;
background-color: green;
}
div.inlineImg {
background-color: blue;
width: 40%;
height: 100px;
float: left;
}
aside {
width: 60%;
height: 100px;
background-color: red;
float: left;
}
#other {
height: 100px;
}
JSFiddle
Description of Problem:
I'm attempting to arrange the kittens in a star-like pattern with 3 DIV "rows." I would like for the first top row's kitten to be centered on the page (easy enough); the second (or '#middle') row to have their cats left-aligned and right-aligned, respectively; and the third ('#bottom') row to have its cats aligned similar to the second row, but slightly indented on both sides. Again, like a star.
I know the float property essentially makes the element(s) absolutely positioned, which collapses the bottom two rows' height, so that's probably not the right answer. But I've also tried text-align and futzing with margins. My brain is fried. What am I doing wrong?
Fiddle:
http://jsfiddle.net/k97CG/1/
HTML Structure:
<div id="top">
<div id="container1" class="containers">
<div id="cat1">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="middle">
<div id="container2" class="containers">
<div id="cat2">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container3" class="containers">
<div id="cat3">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="bottom">
<div id="container4" class="containers">
<div id="cat4">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container5" class="containers">
<div id="cat5">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
CSS Structure:
.containers {
position: relative;
width: 125px;
height: 125px;
}
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
}
#container1 {
margin: 0 auto;
}
#container2 {
float: left;
}
#container3 {
float: right;
}
#container4 {
float: left;
}
#container5 {
float: right;
}
Is there a reason you can't just place them all in one div, then position them with CSS?
<div>
<img id="img01" src="img1">
<img id="img02" src="img1">
<img id="img03" src="img1">
<img id="img04" src="img1">
<img id="img05" src="img1">
</div>
then
div {
position:relative;
width:100%;
height:100%;
}
div img {
position:absolute;
}
#img01 {
top:x;
left:y;
} etc
As a rule, you shouldn't rely on HTML for visually styling content unless you have no other option. That's what CSS is for.
Is this the one you are looking for:
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
clear:both;
}
DEMO
So my logic of Div ID's and Classes must be WAY off.
Heres whats going on:
As you can see the blocks which say PS don't align center with the slider (Which is inside a container.
Here is my css:
/*Front Page Buttons */
#frontpage-Button-Cont {
height: 350px;
}
.button-cont {
width: 175px;
float: left;
margin-left: 10px;
margin-top: 10px;
height: 250px;
}
.thumbnail {
color: #fff;
font-size: 5em;
background: #1f4e9b;
width: 175px;
height: 135px;
text-align: center;
}
.pheader {
color: #DC143C;
min-width: 175px;
text-align: center;
}
.paragraph {
text-align: center;
}
#Align-content {
margin: 0 auto;
}
And here is the html:
<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
</div>
</div>
My theory is that I'm using classes incorrectly?
Thanks.
You can Add this to your CSS
#frontpage-Button-Cont {
width:100%;
}
#Align-content {
display:table;
}
With this your margin:o auto can work
View This Demo http://jsfiddle.net/VGPeW/
You need to make sure that the containing div (in this case frontpage-Button-Cont) is the same width as your slider above it. Then add the property text-align:center to the container. That should fix your issue.
I'm trying to make this kind of responsive design with CSS.
It basically should be 600px width when there's enough space to show whole length.
When not, it folds, then right partial come appears on the bottom of left partial.
I'm struggling how to archive this.
This is DEMO that I could go this far
http://jsfiddle.net/a7Fkj/5/
HTML
<div class="table_row">
<div class="left_partial">
<div class="StoreName">Walmart Store</div>
<div class="Location">Located in California</div>
</div>
<div class="right_partial">
<div class="store_icon"><img src="https://twimg0-a.akamaihd.net/profile_images/616833885/walmart_logo_youtube.jpg"><div>
<div class="person1">John Smith<div>
<div class="person2">Mike Tailor<div>
<div class="person3">Jessica Swan<div>
</div>
</div>
CSS
div.table_row{
min-width: 300px;
margin-bottom: 30px;
}
div.left_partial{
width: 300px;
}
div.right_partial{
width: 300px;
}
div.StoreName{
background-color: #000000;
color: #FFFFFF;
}
div.Location{
}
div.store_icon{
width: 60px;
height: 60px;
}
div.person1{
}
div.person2{
}
div.person3{
}
You don't need media queries for this design- you can use inline-block to collapse the layout when the browser is resized.
HTML:
<div class="table_row">
<div class="left_partial">
<div class="StoreName">Walmart Store</div>
<div class="Location">Located in California</div>
</div>
<div class="right_partial">
<div class="store_icon"><img src="https://twimg0-a.akamaihd.net/profile_images/616833885/walmart_logo_youtube.jpg" /></div>
<div class="people">
<div class="person">John Smith</div>
<div class="person">Mike Tailor</div>
<div class="person">Jessica Swan</div>
</div>
</div>
</div>
CSS:
div.table_row{
min-width: 300px;
margin-bottom: 30px;
}
div.left_partial{
width: 300px;
display:inline-block;
vertical-align:top;
}
div.right_partial{
width: 300px;
display:inline-block;
vertical-align:top;
margin-bottom:30px;
}
div.StoreName{
background-color: #000000;
color: #FFFFFF;
}
div.Location{
}
div.store_icon{
width: 60px;
height: 60px;
display:inline-block;
vertical-align:top;
}
div.store_icon img{
width:100%;
height:100%;
}
div.people{
display:inline-block;
vertical-align:top;
height:60px;
width:234px;
}
jsfiddle: http://jsfiddle.net/kmMEM/
This will collapse the design when the browser is resized- I added a 30px bottom margin to your right_partial to ensure the list stacks correctly.