url: http://www.5vforest.net/#portfolio
#portfolio .projectWrapper{
width: 100%;
float: left;
}
.projectLeft{
font-size: 10pt;
padding-top: 10px;
margin-right: 500px;
}
.projectRight{
width: 500px;
text-align: right;
float: right;
}
No idea why this isn't working.... I'm totally stumped. Any advice? Thanks.
You can make it work by moving <div class="projectRight">..</div> to before <div class="projectLeft">..</div> in the HTML.
both columns should float:
.projectLeft{
font-size: 10pt;
padding-top: 10px;
float:left;
//the width you need
width: 500px
}
.projectRight{
width: 500px;
text-align: right;
float: right;
}
Because there is no space for it. Project left has a 500px margin right which is pushing it down.
.projectLeft {
font-size: 10pt;
padding-top: 10px;
width: 500px; // other div must have fluid space, thanks thirtydot
float: left;
}
Related
Here's my page:
https://i.stack.imgur.com/mKp9H.png
I don't know why it's not aligned... I'm newbie in html and CSS.
Here's my code:
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo {
background-color: black;
color: white;
text-align: center;
padding: 15px;
}
#nav {
min-height: 640px;
width: 130px;
background-color: lightgray;
float: left;
}
#content {
min-width: 687px;
padding: 20px;
float: left;
}
#ad {
float: left;
width: 122px;
min-height: 620px;
background-color: yellow;
padding: 10px;
}
#footer {
clear: both;
background-color: black;
color: white;
text-align: center;
padding: 20px;
}
LINK TO PASTEBIN.
I need this for my school and I can't solve this problem.
I've been trying for past few hours to get it to work, I tried to google for fix but they don't seem to work or I'm just too dumb.
PS: Sorry for my english and my "skills" in html.
You probably want to put all content inside the container. "nav", "content" and so on are currently not inside the container as the container is closed before "nav" starts. To put everything inside the container you have to remove the </DIV>-tag before <DIV ID="nav">. This also fixes the problem with the stray </DIV>-tag at the end. Hope this helps.
I apologize if this is a basic question, but i'm having trouble centering four divs. All four green divs have a float left, then there is a wrapper div (blue). I want to center the four divs but have them aligned like this (On a larger resolution they are not displayed along the middle). So that when reducing the screen size the divs will float underneath each other.
http://jsfiddle.net/qvu712tj/
#blog-wrapper {
background-color: blue;
width: 100%;
height: 700px;
margin-left: auto;
margin-right: auto;
align: center;
}
.blog-section {
background-color: green;
height: 200px;
width: 45%;
margin: 10px;
float: left;
padding: 5px;
}
<div id="blog-wrapper">
<div class="blog-section"></div>
<div class="blog-section"></div>
<div class="blog-section"></div>
<div class="blog-section"></div>
</div>
I hope this makes sense please could anyone help?
Try this:
.blog-section {
background-color: green;
height: 200px;
width: 45%;
margin: 10px 2.5%;
float: left;
/* padding: 5px; */
}
use percentage instead of px for margin and padding
.blog-section{
background-color: green;
height: 200px;
width: 45%;
margin: 1%;
float: left;
padding: 1.5%;
}
Try this
.blog-section{
background-color: green;
height: 200px;
width: 48%;
margin: 12px 1%;
float: left;
}
I am trying to move an image. I Want it to be alligned with the title "Experience". Here is my code
html code
<header>
<h1>Experience</h1>
<div class="logo">
<img src="./img/exp.png">
</div>
</header>
and the css code
.logo{
width: 100px;
}
.logo img{
float: left;
margin-left: 0px 0px 0px 30px;
width: 150px;
height: 38px;
}
Just tweak the CSS a little:
.logo{
width: 100px;
display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
Does this work?
This solution worked for me, but I have no idea for you as you didn't put your full code...
Try adding float:left to .logo and setting display: inline-block on your h1, like so:
*{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 34px
}
header{
background-image: url(../img/bar.png);
background-color: #00B9ED;
height: 75px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
.logo{
width: 100px;
float: left;
//display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
h1 {
display: inline-block;
}
How about making margin-left: 0%; and margin-right. Depends where you want to move it.
You used shorthand for margin-left. We use shorthand for margin only. You did margin-left: top right bottom left instead. I don't think the program reads that correctly.
I have a column in a table that contains and icon and a chunk of text. the icon is a div with a data url background. I need the cell to be a little bit bigger than the content and the content to be centered within the cell. I've been banging my head over this for a while now and can't get it to work.
CSS
body {
width: 90%%;
margin-left: auto;
margin-right: auto;
font-size: 100%;
font-family: "Arial"
}
table {
/*width: 100%%;*/
width: 100px;
margin-left: auto;
margin-right: auto;
font-size: 100%;
border-collapse: collapse;
}
td.bordered_centered {
border: solid 1px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
}
.icon {
float: left;
height: 20px;
width: 35px;
margin-right: 0.25em; /* 0.25em is roughly equal to one space character. */
}
.lastFour {
float: left;
width: 35px;
padding-top: 2px;
}
.visa {
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAUCAYAAAAHpoRMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABWZJREFUeNrElmlsVFUYhp87SztD95VSoDNdWVILWkBokBr4UbBuGAUUJERiYoLGjR8GI4kJiCAI7sEQ0j/8MRq3IkShAYpSEFp2JNBl2kJLp9NlOrcz05m51+9OcIEiJSbimZyZb86dc+Y97/t97znK8ePH44G90mdKN3P3mya9Sfpsi7z9NGrUqJkOhwP5vOtI/H6/yeVyFaiqWmeS7zNyc3P/FyBGs9vtFBUVGaHTYMZks9miD1rbe/i+xsWuL5tIibPy7LJJLKkspKc/wEfb66mubmTFyhLmz81hw6ZfaXL1s/7t2WRl2Nn80Sn2H+7AF4iQbrPySGUOz6+YTE52Irqus2l7A3uqWwgGw8yrcLDiqQkUOJKj/2symVAUBdPfUeaMS2XubAeNzT727W7nYstAdHzf4Sus31RP99UAxcWZnL/sZeeOC6ieMBGzwqaPT/Lp5gYyk2wsrHASDIQ5/Vs3qj8cnV/X0MHWT87w87Fu6g66OVzXzbWuwDCWTDcPOMcmUv7AeBS7FbstFt9giKqq80R6Q6x4aRrlpWOoPdSBHtB4+LF80tNiOXWkK5qGFZVOtq0ro/qbSj54t5yJeamEIzqf7TiPtyfAouX5JE+SehGmBoXBEcFEIhoZybES6Az4AtQcbGXPt40Ul41l8RP5tHaq1IiUZruZgslp5I9JomhqOpZYE1s3nuCtjUexx1pwZicI9VBztJ09P7iYIr95bvEEUs1mVG8Qt8c/MhiLxUxmegxhdI6cdPPh9jNYrWaWiv4Txydy4nQXFy/0UFCYTF5uIlbRe83r97F0VQlhNcSGNUd49c1DdLhVhsIaVTvP0d3pZ/nTE6NMGZmh+kJ0dPmGgbEMG5AcyEi3EREwv4jG/i6VuQscLHs8VyjXOHK0E587yIyFBRTlJtHXP4QjK5GqLQ+yrTSDtS/X8sWuRlYuvwfd0suB2mvGDrlwsYe2di+egSCpFhsdnsDIYEzCbaZUB/4Q/mYvKdk2qaoJZKfFca6xl9oDrUK/xvSybLrcg2x5v4HExBieWVKIWTf8S2dcTgLu/kG+/uoyHe0qGXkJ7P3RRZ8w1+cJopt0GqUSRwRj6Jw92k5yqgCSqpi/YDxPVuRGnzW5eqX3MGlqCvdPy6Sp1ct3uxu5JqA/rzpLOKhhF5lfeW0Knr4AtfvbyXLYeWN1CROdybS5/byzpR6PyOb1Dt0JGEXoT2HtulmYQhpzZmURb4+R/erkjIln1YvTxTuSKJGc8arxbH6vnJOnumnrDGCzWpgzJ5tFj+ZRf9bLC6vtFE9O4qHyTMS2oi0pIYUrHYNkZcYMA6PI2aSXlpbekVsagGSKvIa3cPSJcbiJVJoPTQuimDXZXAhxOvSwEcveDYM1GW5voPvL9evr64czc7t2Mww96EEZEo8Z6sUSvip51ggDbnS1F5PmiYJiSIBEItHZutku/hUnZ0AGxOVB4ZrbyzTiETtwCdQm+Z/LaD3HYVA8xy8Agn1CjyoIhQFNiZqgokmsi0noIYlDBrVISEQU0tPGY/03YPRgN5H+c7Ljy9BzQhhoQwkPosQkQEIBSnqZsJ4mpZwo0kjim2RZRSxMC6NF/MKMTxgUpgKd4G2BUC9K/NiRE/gGN1Zd6MKA7r2E5r8q62uYk4ph7EKRXRaLTZMV4mXchq6Yr0t5c55dl1go0TWpoNAAmgBTFPMtwWiBQODPk9uYHhnqQ1Pb0P0uQTSIKS4Hy+h5AmC0ZGjcLRdS/jHP/giswpo1Ot9sy7pRepHTONkNMMeam5tnOp3O6N3CmG6OSYl2Ukr+8/uMEEFLS4sRtivXr50HpN97q7PqLl07DTRlvwswANn8NfEnziBGAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
}
td,th {
font-size: 95%;
}
HTML
<td class='bordered_centered cardNumber' valign='center'>
<div class='cardHolder'>
<div class='icon visa'></div>
<div class='lastFour'>9999</div>
</div>
</td>
I can make it look right on some screens and some resolutions by using padding to center the text, but I can't get it looking good everywhere. It's to be viewed on phones and tablets so I can't just ignore some screen sizes.
I've also tried using an img with the data uri. That helps a little. Unfortunately it would make the page I'm trying to build monstrous so I'd like to avoid it if at all possible.
Any help would be appreciated, thanks.
vertical-align: center;
Is not correct; try:
vertical-align: middle;
Form more information see:
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
I'm in the process of converting my layout to a responsive design. I've looked at some tutorials and made some adjustments. However, when I load the page on a cell phone, iPad, or even make my window smaller, the content runs on top of each other. I was under the impression that using % instead of pixels would fix this. Am I wrong? The link is below.
http://tinyurl.com/ab2fmwv
article {
width: 80%;
min-height: 100%;
margin-left: auto;
margin-right: auto;
border: solid;
position: relative;
overflow: hidden;
clear: both;
}
#two_column_left {
width: 74%;
float: left;
background-color: #FFFFFF;
}
#two_column_right {
width: 25%;
float: right;
}
.three-col-row {
width: 100%;
float: left;
padding-top: 2%;
}
.col-1 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;
}
.col-2 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;
}
.col-3 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;
}
.pic-3-col {
width: 175px;
height: 100px;
}
p.title-3-col {
color: #222020;
font-size: 1.3em;
clear: both;
}
p.description-3-col {
width: 190px;
}
although the columns size perfectly, it's contents do not. for example
.pic-3-col {
width: 175px;
height: 100px;
}
if you want a responsive fluid layout, there should not be values like this in the CSS.
you are using width in pixels for following classes
p.description-2-col style.css line no 439 solu. add it 'max-width 100%'
p.description-3-col style.css line no 406 solu. add it 'max-width 100%'
.pic-3-col style.css line no 197 solu. add it 'max-width 100%' </br>
wrap images of same columns in .pic-3-col as the first column is done
and also according to resolution keep chanding their wirdth in percentage using media queries