Hi i am having trouble to code html on something like on the picture below. I have tried float left right
but none of these works for the boxes on the left side and right. for the center box i used margin auto left right.
which works fine. Only problem is whenever i try with boxes on left and right side, it results in weird way and I could not figure it out how it should be done. Help appreciated.
here is the code i have tried and as you might already see i am very new to html.
<html>
<head>
<title>page4</title>
<style>
#container
{
width:1200px;
height:700px;
margin-left:auto;
margin-right:auto;
background-color:grey;
}
#image1
{
background-color: red;
height:140px;
width:300px;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image2
{
background-color: orange;
height:140px;
width:300px;
float: left;;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image3
{
background-color: yellow;
height:140px;
width:300px;
float: left;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image4
{
background-color: blue;
height:140px;
width:300px;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image5
{
background-color: green;
height:140px;
width:300px;
float:right;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image6
{
background-color: lightgreen;
height:140px;
width:300px;
float: right;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image7
{
background-color: purple;
height:140px;
width:300px;
float: left;;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image8
{
background-color: maroon;
height:140px;
width:300px;
float: left;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#footer
{
background-color: lime;
height:140px;
width:1200px;
float:right;
font-size:40px;
line-height:150px;
text-align:center;
letter-spacing:10px;
}
#content
{
background-color: pink;
height:560px;
width:600px;
font-size:40px;
line-height:290px;
text-align:center;
letter-spacing:10px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="image1"> image1 </div>
<div id="image5"> image5 </div>
<div id="content"> Content</div>
<div id="image6"> image6 </div>
<div id="image7"> image7 </div>
<div id="image8"> image8 </div>
<div id="image2"> image2 </div>
<div id="image3"> image3 </div>
<div id="image4"> image4 </div>
<div id="footer"> footer </div>
</div>
</body>
</html>
Use css left 0 and right 0 will move your button or div to left and right and even it will be responsive
Related
I'm having trouble getting columnContainer to center inside sectionTwo. The code is below. No matter what I do, it seems to be left aligned.
HTML:
<section class="sectionTwo">
<div class="columnContainer">
<div class="columnExplanation">
<img src="Images/imagehere.png" style="width:150px;height:auto;margin-left:30%;margin-bottom:10px;"/>
<p>text here.</p>
</div>
</div>
</section>
CSS:
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
width:100%;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
Thanks for your help!
If you are trying to center 'ColumnContainer' it already centered it is because you have them both set to 100% width;
change it to this to see it actually working:
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
background-color: red;
width:100%;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
text-align: center;
}
I don't think you should use margin-left 30% on your image if you want to center it. Indeed, as an inline element, you can use text-align: center on your parent div to do the trick :
HTML:
<section class="sectionTwo">
<div class="columnContainer">
<div class="columnExplanation">
<img src="Images/imagehere.png" style="width:150px;height:auto;margin-bottom:10px;"/>
<p>text here.</p>
</div>
</div>
</section>
CSS
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
width:100%;
position:relative;
display:block;
margin-top:20px;
text-align: center;
}
this one will help you:
section {position:relative;}
section #your_id {
position:absolute;
top:50%;
margin-top:-100px; */half of your height*/
right:50%;
margin-right:-100px; */half of your width*/
}
Okay, so here's the code
.div1 {
background-color:skyblue;
font-family:Verdana;
text-align:right;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
.div2 {
background-color:lightgreen;
font-family:Verdana;
text-align:left;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
<div class="div1">
<h1>Hey</h1>
</div>
<hr>
<div class="div2">
<h1>Hello</h1>
</div>
jsfiddle
As you can see, I tried to put a hr between the two divs. This is good, except for the white space around the black line that I want. I know it's supposed to be like this, but is there a way to get just the black line?
Simple use margin: 0 to hr element:
hr{
margin: 0;
}
.div1 {
background-color:skyblue;
font-family:Verdana;
text-align:right;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
.div2 {
background-color:lightgreen;
font-family:Verdana;
text-align:left;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
hr {
margin: 0;
}
<div class="div1">
<h1>Hey</h1>
</div>
<hr>
<div class="div2">
<h1>Hello</h1>
</div>
I am trying to build a website that has three floating columns in the middle of the page. I have a container wrapping around everthing but it will not extend fully. Is there something I am doing wrong?
Thanks
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
#container
{
background-color:#CCC;
min-height:100%;
}
#header
{
background-color: #000;
width:100%;
float:left;
}
#navbar
{
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper
{
background-color:#000;
height: 175px;
}
#colone
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree
{
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
#footer
{
}
You need to clear your float. This is what it looks like.
http://jsfiddle.net/ZT59d/
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
<div id="footer">This is the footer</div>
</div>
#container {
background-color:#CCC;
min-height:100%;
}
#header {
background-color: #000;
width:100%;
float:left;
}
#navbar {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
#colone {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree {
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
.clear
{
clear:both;
}
#footer {
}
If you don't mind, I'm going to give you some suggestions on how to improve your code.
First, you're using HTML5 but you're not using some of the new elements. Let's replace them.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
You're also using ids for everything. Trust me, you don't want to do that. Realistically, you should be using ids sparingly. I'm at the point now that the only time I use an id is if I need to target something with javascript.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div class="column">This is column one</div>
<div class="column">This is column two</div>
<div class="column">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
Here's what you're new css would look like.
body {
background-color:#CCC;
min-height:100%;
}
header {
background-color: #000;
width:100%;
float:left;
}
nav {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
.column {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
.clear {
clear:both;
}
I left #topper in because it's unusual. It's hard for me to tell exactly what you're trying to achieve with it.
Here's the fiddle with everything together.
Easy way to fix this is to add such CSS rules:
#footer
{
clear: both;
}
#container {
overflow: hidden;
}
DEMO
Obviously, you have some problems understanding how float property works. You should investigate it more careful. Especially I would recommend to check out clearfix hack.
I have a menu bar at the top of an application with 3 sections. Icons on the left, Icons in the center, and an icon on the right. I can easily float left and float right the respective sections, but I don't know how to float a center section.
I have attached screen shots of the desired outcome, and what I am currently getting.
The problem is that the number of icons in the left and center sections will change all the time.
This is my Desired outcome
vs
My actual Outcome
I am using the same icons in my example, but the left is in the correct place, the logout button is on the correct side, but pushed down, the middle section is all screwed up.
Thank you for any help.
<body>
<div id="content">
<div id="menuBar">
<div id="menuBarContent">
<div class="homeIconDiv menuBarHardIconDiv floatLeft">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div class="backIconDiv menuBarHardIconDiv floatLeft">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div class="menuBarSoftIconDiv">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div class="menuBarSoftIconDiv">
<img class="menuBarIcon" src="images/icons/home.png" />
</div>
<div id="logoutIconDiv" class="floatRight">
<img class="logoutIcon" src="images/icons/logoutButton.png" />
</div>
</div>
</div>
<div id="mainContent" class="clear">
</div>
</div>
html
{
height:100%;
}
body
{
height:100%;
margin:0;
padding:0;
font-family: 'Montserrat', sans-serif;
}
.MSIQtextbox {
border: 1px solid #67AE3D;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
outline:0;
height:35px;
width: 375px;
padding-left:10px;
padding-right:10px;
}
.floatLeft
{
float:left;
}
.floatRight
{
float:right;
}
.center
{
text-align:center;
margin:0 auto;
}
.clear
{
clear:both;
}
#content
{
height:100%;
}
#menuBar
{
position:fixed;
top:0;
background-color:rgba(211,211,211,0.9);
height:64px;
box-shadow: 0px 2px 1px #888888;
margin-bottom:3px;
z-index:10000;
width:100%;
}
#menuBarContent
{
width:1020px;
margin: 0 auto;
}
#mainContent
{
width:1020px;
min-height:630px;
margin-left:auto;
margin-right:auto;
height:100%;
padding-top:3px;
}
.optionsDiv
{
color:White;
}
.menuBarHardIconDiv
{
height:64px;
width:64px;
border-right:1px solid #858585;
}
#logoutIconDiv
{
height:64px;
}
.menuBarHardIconDiv:hover
{
background-color:#F5F0E0;
box-shadow: 0px 0px 0px #888888;
}
img.menuBarIcon
{
position:relative;
top:50%;
left:50%;
margin-top:-12px;
margin-left:-12px;
}
img.logoutIcon
{
position:relative;
top:50%;
margin-top:-12px;
}
.center {margin-left:auto; margin-right:auto;}
I made a div have class footer and want footer to be in the end of the page not fixed actually.
it is showing when the data of content element finish , i mention min-height of content equal t 90% so that if there is no more data then also in this case footer should be end of the page.
here is my css code
.header-cont
{
width:100%;
position:absolute;
top:0px;
}
.header {
height:50px;
background:#3399FF;
border:1px solid #CCC;
width:100%;
margin:0px auto;
text-align:center;
}
.footer{
position:absolute;
text-align:center;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
width:100%;
background-color: #3399FF;
height:35px;
}
.footer-data
{
padding:7px;
text-align:center;
font-size:18px;
}
.content{
min-height:90%;
width:1130px;
background: white;
border: 1px solid white;
top:80px;
margin-right:155px;
margin-top:100px;
margin-left:125px;
}
HTML code
<div class="header-cont">
<div class="header">
</div>
</div>
<div class="content">
</div>
<div class="footer">
<div class="footer-data">
footer data
</div>
</div>