I have searched everywhere for an answer, but I don't think I'm asking the question in the right way. I have two columns, but I need the elements to stack and cant seem to make anything work. I also want to add a background color to make the elements stand out.
<style type="text/css">
#showcase {
width: 100%;
margin-bottom: 20px;
margin-top: 4px;
vertical-align:top;
}
#showcase > div {
width: 280px;
float: left;
border: 1px solid #ddd;
padding: 5px;
vertical-align:top;
margin-left: 0px;
}
#showcase > div:first-child {
margin-left: 0;
vertical-align:top;
}
#showcase > div > div {
float: right;
margin-left: 8px;
vertical-align:top;
font: 12px arial, sans-serif;
}
#showcase > div > img:last-child {
width: 150px;
clear: both;
margin-top:16px;
margin-left:0px;
vertical-align:top;
}
img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}
</style>
<div class="module" style="margin-top:0px;">
<div class="module-header"><h3>Product Spotlight</h3></div>
</div>
<div id="showcase">
<? while($row = mysql_fetch_array($products_showcase_query)): ?>
<div>
<span style="display: block;font-size:20px;line-height: 130%;margin-bottom:4px;"><?= $row['product_headline'] ?></span>
<img src="../product_images/<?= $row['product_image'] ?>" style="width: 134px; float: left;" />
<div><div class="floatLeft">
<?= $row['product_summary'] ?>
</div></div>
<img src="../product_logos/<?= $row['product_logo'] ?>" />
</div>
<? endwhile ?>
<span style="display: block;clear:both;"></span>
</div>
layout example
Any help would be appreciated! Thank you :)
Related
I have a simple web page there I am using clearfix fix as below
.clearfix:after{
content: "";
display: :table;
clear:both;
}
I have create code https://jsfiddle.net/xrcwrn/7b26pwsd/1/
I want to show profile below but it is showing at right
You can try to wrap all of the items which have float property with a div.clearfix. Like this:
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-family: halvitica ,Arial;
font-size: 18px;
}
.container{
width:1140px;
margin-left: auto;
margin-right: auto;
margin-top:20px;
}
h1,h2{
color:green;
}
h1{
font-size: 40px;
}
h2{
font-size: 35px;
}
p{
text-align: justify
}
.blog-post{
width: 75%;
float: left;
padding-right: 30px;
}
.other-post{
width: 25%;
float:left;
}
.author-box{
padding-top: 20px;
border-top: 1px solid green;
}
.author-box img{
height: 100px;
width: 100px;
border-radius: 50%;
}
.clearfix:after{
content: "";
display: :table;
clear:both;
}
.other {
margin-bottom: 40px;
}
.author-text {
float: left;
margin-left: 25px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="container">
<div class="clearfix">
<div class="blog-post">
<h2>He share of first to worse</h2>
<p>
Conveying or northward offending admitting perfectly my. Colonel gravity get thought fat smiling add but. Wonder twenty hunted and put income set desire expect. Am cottage calling my is mistake cousins talking up. Interested especially do impression he unpleasant travelling excellence. All few our knew time done draw ask.
</p>
</div>
<div class="other-post">
<div class="other">Post 1</div>
<div class="other">Post 2</div>
<div class="other">Post 3</div>
</div>
</div>
<div class="author-box">
<image src="https://randomuser.me/api/portraits/men/68.jpg" alt="author"/>
<p class="author-text">Neeta Rai</p>
</div>
</div>
I have just started learning html and css3. trying to create a login page but when I am trying to add once check box its not inline with label. When I run the same code only for check box its inline. not able to understand what is the exact issue.
HTML Code is
<div class="checkbox1">
<input type="checkbox" id="cb">
<label for="cb">Stay signed in</label>
</div>
CSS code is
#wrapper #subwrapper .checkbox1{
display: inline-block;
float: left;
font-size: 20px;
color: #ffffff;
}
When I include the same in my complete html code and css code the check box and label are not perfect.
Complete HTML code is.
<!doctype html>
<head>
<title>Dchamps-Signin</title>
<style>
body {
background-image: url("bg_signin.jpg");
background-repeat: no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="signin.css">
</head>
<body>
<header>
<div class="header">
<div>
</header>
<div id="wrapper">
<div class="logo">
<img src="Logo_FF.gif">
</div>
<div class="heading">
Sign in to your account
</div>
<div id="subwrapper">
<div class="un">
Username
</div>
<input type="text" size="60">
<div class="pw">
Password
</div>
<input type="text" size="60">
<div class="signin">
<button class="button">Sign in</button>
</div>
<div class="checkbox1">
<input type="checkbox" id="cb">
<label for="cb">Stay signed in</label>
</div>
<div class="needhelp">
Need Help?
</div>
</div>
</div>
<footer>
<div class="footer">
<ul>
<li>Help</li>
<li>Terms</li>
<li>CompanyInfo</li>
</ul>
</div>
</footer>
</body>
</html>
and My complete CSS Code
.header {
width: 100%;
height: 50px;
margin-bottom: 25;
}
#wrapper{
width: 800px;
margin: 0 auto;
float: center;
text -align: center;
}
#wrapper .logo{
margin-top: 25px;
text-align: center;
}
#wrapper .heading{
padding-top: 20px;
font-size: 45px;
color: #e94324;
text-align: center;
}
#wrapper #subwrapper {
width: 400px;
margin: 0 auto;
}
#wrapper #subwrapper .un {
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
float: left;
padding-left: 5px;
}
#wrapper #subwrapper .pw {
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
float: left;
padding-left: 5px;
}
#wrapper #subwrapper input{
padding-top: 5px;
background-color: transparent;
height: 50px;
}
#wrapper #subwrapper .signin{
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
}
#wrapper #subwrapper .button{
background-color: #f26534;
height: 65px;
width: 380px;
font-size: 35px;
/*-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;*/
color: #ffffff;
top: 55%;
}
#wrapper #subwrapper form {
}
#wrapper #subwrapper .checkbox1{
display: inline-block;
float: left;
font-size: 20px;
color: #ffffff;
position: relative;
}
#wrapper #subwrapper .needhelp{
float: right;
color: #f6ec28;
padding-bottom: 80px;
}
.footer{
height: 20px;
clear: both;
border-top: 1px solid #254A73;
}
.footer ul li{
float: right;
display:inline-block;
margin-right: 20px;
color: #ffffff;
}
I am not sure why the check box is not in line.
Regards,
KJ
Here is a fiddle with the fixed checkbox alignment issue, it is just a quick fix but you should try to think about your structure and how you style: http://jsfiddle.net/n2b93zaz/2/
#wrapper #subwrapper .checkbox1 {
display: inline-block;
float: left;
font-size: 20px;
color: #000000;
position: relative;
}
/*Added this css rule to override the input properties set earlier*/
#wrapper #subwrapper .checkbox1 input{
height:auto;
}
Your problem this:
#wrapper #subwrapper input{
padding-top: 5px;
background-color: transparent;
height: 50px; //This is your problem. Change height to auto or without value.
}
I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser
I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:
Current output:
http://postimg.org/image/l2rxf4603/
If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!
HTML & CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rob's BBC</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" alt="bbclogo" height="28" />
</div> <!-- logodiv -->
<div id="signindiv">
<img src="images/signinlogo.png" alt="signinlogo" />
<p>Sign In</p>
</div> <!-- signindiv -->
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div> <!-- topmenudiv -->
<div id="searchdiv">
<input type="text" placeholder="search" />
</div> <!-- searchdiv -->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
</div>
</div> <!-- newsbar -->
</div> <!-- fixedwidth -->
</div> <!-- topbar -->
</div> <!-- container -->
</body>
</html>
JsFiddle: http://jsfiddle.net/1f030av9/
Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.
Changed css:
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
Became:
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed line padding-right: 22px; from #searchdiv input
Here's a fiddle.
Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"
your fiddle
It works for me
It is stretching to 100%
with slight edits not relating to your issue though
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
clear:both;
}
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed padding-right too from #searchdiv input too
I'm using this CSS track to get the hang of what's happening in the browser. However, the last assignment was an incomplete success. How can I push the post-updates section not only right, but to the top of the page?. (So far I've tried position: absolute without much luck).
ed: Both answers helped, I am grateful.
You can try this:
Working Fiddle here
#post-update {
position:absolute;
top:0; right:0;
}
Good Luck...
The <div id="post-update"> needs to be floated right and the width of the header narrowed to fit in the screen.
JSFiddle Demo
HTML
<div id="content">
<div id="header">
<h1 id="stf">Stanford Connection</h1>
<img src="//i62.tinypic.com/i2onyf.gif" alt="I'm a tree"/>
</div>
<div id="about">
<img src="//i62.tinypic.com/2vnkmtl.jpg" alt="Molly"/>
<h2 class="section-heading">About Me</h2>
<p><strong>Birthday:</strong> December 8, 2001</p>
<p><strong>Gender:</strong> Female</p>
<h2 class="section-heading">Friends</h2>
<p><strong>Patrick Young</strong></p>
<p><strong>Chloe Cox</strong></p>
</div>
<div id="updates">
<h1>Molly the FloPup</h1>
<h2 class="section-heading">Status Updates</h2>
<p>When am I going to get fed?</p>
<p>I want to go for a walk. </p>
<p>There's a squirrel on the patio, why won't Patrick let me chase it? </p>
<p>I really like summer, because I get to sun myself on the patio </p>
</div>
</div>
<div id="post-update">
<h2 class="section-heading">Post Updates</h2>
<form action="">
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<input type="button" value="Submit New Update" align="left"/>
</form>
</div>
CSS
body {
padding: 0.5em;
}
strong {
font-weight: bold;
}
h1 {
font-size: 32pt;
text-indent: 1em;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
#stf {
margin-left:1em;
line-height: 2.5em;
display: inline;
vertical-align: top;
}
#content {
width:50em;
float:left;
}
#header {
background-color: #9A0000;
color: white;
height: 120px;
}
#header img {
display: inline;
vertical-align: top;
float: right;
}
.section-heading {
border-top: 3px solid black;
border-bottom: 3px solid black;
background-color: #CC9191;
font-size: 13pt;
padding-left: 0.5em;
padding-bottom: 0.3em;
padding-top: 0.3em;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
#about {
width: 200px;
font-family: sans-serif;
font-size: 12pt;
float: left;
}
#about img {
margin-top: 7px;
}
#updates {
/* background: #AA4; */
float:left;
margin-left:10px;
}
#updates p {
border-top: 2px solid black;
line-height: 2em;
}
#post-update {
float: right;
}
textarea {
width: 17em;
height: 7em;
}
I have a series of images I would like to display horizontally on my website, using CSS and divs. I've looked at several posts about how to display images horizontally already and I wasn't able to get any of them to work.
Here's the code from the page I'm referring to:
<head>
<link rel=StyleSheet href="style.css" type="text/css" media=screen>
<style>
div.imageBox {
float: left;
margin-right: 10px;
}
div.imageBox p {
text-align: center;
}
</style>
</head>
<body>
<?php include 'header.php'; ?>
<div id="content">
<div id="container">
<div class="imageBox">
<img src="image" width="800" height ="600">
</div>
<div class="imageBox">
<img src="image" width="600" height ="450">
</div>
<div class="imageBox">
<img src="image" width="800" height ="450">
</div>
</div>
</div>
</body>
and here's the code for the style sheet:
body{
font-family: helvetica, arial, sans-serfif;
font-size: 14px;}
div#menu {
display: inline;
text-align: center;
width: auto;
top: 20px;
margin-left: 10%;
margin-right: 10%;
background: transparent;
height: 10px;
position: fixed;
}
div#menu ul {
margin: 0;
display: block;
}
div#menu ul li {
padding-right: 55px;
display: inline;
}
div#content {
padding-top: 40px;
text-align: center;
}
div#container{
float: left;
display: inline;
height: 800px;
width: 0px;
}
a:link {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #000;
}
Is there perhaps an easier way for me to do this?
Thanks for your help!
Try to change
div#container{
float: left;
display: inline;
height: 800px;
width: 0px;
}
into
div#container{
float: left;
display: inline;
height: 800px;
white-space: nowrap;
}
add:
div.imageBox {
float: left;
margin-right: 10px;
display:inline;
}
You're using divs which are block elements when you should be using something inline.
Images will align next to each other. If you need the divs, you can give them the style display: inline to make them behave in the same way. You can also use float: left, but that will make things harder in most cases.
You can apply styles like margins and borders to images too, so you may not need the divs. Although I'm not sure how you want it to look exactly.
Here is the example: http://jsfiddle.net/hobobne/d5sYM/
<html>
<head>
<style>
img {width: 100px; height: 100px;}
.imageBox {display: inline-block; border: 1px solid grey; background: silver; padding: 4px; text-align: center; font-size: 10px;}
</style>
</head>
<body>
<div class="imageBox">
<img src="http://screenshots.en.softonic.com/en/scrn/80000/80669/easter-icons-5.jpg"><br>
Image 1
</div>
<div class="imageBox">
<img src="http://l-userpic.livejournal.com/82523298/2181918"><br>
Image 2
</div>
<div class="imageBox">
<img src="http://www.jellymuffin.com/icons/emo/images/30.jpg"><br>
Image 3
</div>
</body>
</html>