I am working on a page for employees biography with one picture. The biography (content) to display on the left and photo of the employee on the right as sidebar. The page also have footer with full width.
I used CSS to layout the page, and float:left both content and photos and set the width divided accordingly, but the photo (aside) does not display on the right and it appear under the content, however I used display:inline properties for both content and aside. I am trying to display the aside on the right side of the article.
article, h1, aside, footer {
padding: 20px;
}
h1 {
width: 100%;
background-color: gray;
}
article {
width: 60%
float: left;
display: inline;
}
aside {
width: 40%;
float: left;
display: inline;
}
footer {
width: 100%;
background-color: gray;
clear: both;
}
<body>
<article>
<h1>Biography</h1>
<p>General Information goes here</p>
<p>Rest of information goes here</p>
</article>
<aside>
<h2>Employee Photo</h2>
<img src="http://placehold.it/350x150" />
</aside>
<footer>
<p>Copyright goes here</p>
</footer>
</body>
A couple of issues should be corrected:
You have width set to 60% and 40% for article and aside, however they also have padding:20px, that make the total width over 100%, an easy fix would be set box-sizing:border-box, it makes the padding as part of the % width.
If you set float:left on an element, that turns it to a replaced element, display:inline or block won't take any effects.
There is an syntax error, it's missing ; at the end of width: 60%.
It would better to also set img {max-width:100%; height:auto;}, to make it to be responsive.
Below is the updated example:
* {
box-sizing: border-box;
}
article, h1, aside, footer {
padding: 20px;
}
h1 {
background-color: gray;
}
article {
width: 60%;
float: left;
}
aside {
width: 40%;
float: left;
}
footer {
background-color: gray;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
<body>
<article>
<h1>Biography</h1>
<p>General Information goes here</p>
<p>Rest of information goes here</p>
</article>
<aside>
<h2>Employee Photo</h2>
<img src="http://placehold.it/350x150" />
</aside>
<footer>
<p>Copyright goes here</p>
</footer>
</body>
Wrap it with a flex container will do.
<div style="display:flex">
<article>...</article>
<aside>...</aside>
</div>
<footer>...</footer>
Related
I am trying to align two different divs next to each other using inline-block, but they are instead stacking like a blocked element. Specifically, they are the wrapper_image div containing an image, and the about_div containing some text information.
I have the following HTML:
<body>
<header>
... header information here
</header>
<div class="wrapper_image">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
</div>
<div class="about_div">
<h3 id="about_me">About Me</h3>
<p id="about_me_info">
Text
</p>
<p id="about_me_info">
Some more text
</p>
</div>
<footer>
<p>
© Name
</p>
</footer>
</body>
And CSS:
.wrapper_image {
display: inline-block;
vertical-align: top;
}
.about_div {
display: inline-block;
vertical-align: top;
}
.profile-photo {
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#about_me {
font-size: 2em;
}
#about_me_info {
font-size: 1.5em;
}
everything seems oks.
I put a demo picture and display in chrome and this is what looks like
The image and the text are inline-block and seems ok
I'm using the CSS3's Viewport Height to make a fullscreen section (height: 100vh). Unfortunately, I'm having trouble horizontally and vertically centering elements within a section. I'm attempting to have an image and bit of text within the first section appear in the center of the screen as a group. Thanks for the help!
http://jsfiddle.net/stybfgju/
HTML:
<section class="red-bg">
<div class="middle">
<img src="http://lorempixel.com/g/300/300/abstract/" alt="" />
<h1>Some text here.</h1>
</div>
</section>
<section class="blue-bg">
<p>Another section here.</p>
</section>
CSS:
body {
color: #fff;
}
section {
width: 100%;
height: 100vh;
}
.middle {
/* needs to be vertically and horizontally aligned */
}
.red-bg {
background-color: #f00;
}
.blue-bg {
background-color: #00f;
}
try flexbox
body {
color: #fff;
}
section {
width: 100%;
height: 100vh;
display : flex;
}
.middle {
/* needs to be vertically and horizontally aligned */
margin : auto;
}
.red-bg {
background-color: #f00;
}
.blue-bg {
background-color: #00f;
}
<section class="red-bg">
<div class="middle">
<img src="http://lorempixel.com/g/300/300/abstract/" alt="" />
<h1>Some text here.</h1>
</div>
</section>
<section class="blue-bg">
<p>Another section here.</p>
</section>
Try this. http://jsfiddle.net/stybfgju/1/
.middle {
/* vertical centering */
position: relative;
top: 50%;
transform: translateY(-50%);
/* horizontal centering */
margin: 0 auto;
display: table;
}
If you change display to block then you'll need to explicitly set width
Add text-align: center if needed.
I'm creating a website that contains a footer, on the left side just simple text. On the far right will be icons with links to various social networking sites. I can't get the icons to stay inside the container when I float the image to the right. How can I get the image to stay inside the yellow area and out of the green without adding any more padding to the footer?
http://jsfiddle.net/Fd4Pc/1/
body {
background-color: #17241d;
margin: 0;
}
#mainWindow {
width: 1200px;
margin-left: auto;
margin-right: auto;
background-color: #fffff6;
height:100%;
}
.right {
float:right;
}
footer, .footer {
font-size: .8em;
padding:10px;
}
<body>
<div id="mainWindow">
<p>Text here</p>
<div id="footer">
<footer>
<span>Left Side</span>
<img class="right" src="http://static.viewbook.com/images/social_icons/facebook_32.png" />
</footer>
</div>
</div>
</body>
Try adding overflow:auto to your footer:
footer, .footer {
font-size: .8em;
padding:10px;
overflow:auto;
}
jsFiddle example
You can also set a line-height to your footer: http://jsfiddle.net/Fd4Pc/3/
footer, .footer {
font-size: .8em;
padding:10px;
line-height: 2em;
}
floated element will expand the parent element height, to expand that add float to the parent as well:
footer, .footer {
font-size: .8em;
padding:10px;
float:left;
}
This can be done in two ways
Add overflow: hidden to footer
or
clear div that is
<footer>
<!--your code goes here-->
<div style="clear:both"></div>
</footer>
Basically, I don't understand why the isn't at the top right? It positions itself at the bottom, even though by my understanding it should be on the top right?
See JSfiddle for detailed code
http://jsfiddle.net/5JhMj/
#content section {
padding: 4%;
width: 70%;
float: left;
background-color: white;
margin-bottom:8%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
aside {
width: 30%;
float: right;
background-color: green;
}
You are floating your sidebar around your last section element.
Instead of this, wrap your sections around another container which you float. Then let your sidebar float aside that new container.
<div class="container">
<div class="section-container">
<section>...</section>
</div>
<aside>
...
</aside>
</div>
CSS
.section-container{
width: 70%;
float: left;
}
aside {
width: 29%;
float: right;
background-color: green;
}
Fiddle:
http://jsfiddle.net/5JhMj/2/
Simple solution is put your aside before section
like
<div class="container">
<aside>
<h1>placeholder</h1>
</aside>
<section>
...
...
Working Fiddle
I have to build almost standard 3 columns layout
-----header-----
-s1-content-s2--
-----footer-----
Where sidebar1 and 2 has width:25% and content box has 50%. And it working perfect.
But the difference is in sidebar1. On some subpages there is absolutely no content for it. I set css for sidebar1 to max-width:25%; and when no content appears div has 0px x 0px. So almost done.
The final effect is to stretch content div to 75% when sidebar1 is empty.
Is it possible to do this without ugly css hacks or using JS? I checked many solutions and most are not working correctly.
You have to use either floats, or display: table, I prefer using the latter, but to each their own.
<div id="wrapper">
<div class="sidebar-one">
some (or no) content
</div>
<div class="content">
main content
</div>
<div class="sidebar-two">
sidebar two
</div>
</div>
#wrapper { display: table; }
#wrapper>div { display: table-cell; vertical-align: top; }
#wrapper .sidebar-one { max-width: 25%; }
#wrapper .sidebar-two { width: 25%; }
This handles optional content on the left or right.
jsFiddle
HTML
<header></header>
<div id="wrapper">
<div id="left-sidebar">
Optional Content
</div>
<div id="content">
<p>To sailors, oaths are household words; they will swear in the trance of the calm, and in the teeth of the tempest; they will imprecate curses from the topsail-yard-arms, when most they teeter over to a seething sea; but in all my voyagings, seldom have I heard a common oath when God's burning finger has been laid on the ship; when His "Mene, Mene, Tekel Upharsin" has been woven into the shrouds and the cordage.</p>
</div>
<div id="right-sidebar">
Optional Content
</div>
</div>
<footer></footer>
CSS
#wrapper {
display: table;
}
#left-sidebar, #content, #right-sidebar {
display: table-cell;
vertical-align: top;
}
header, footer {
background: pink;
width: 100%;
height: 2em;
}
#content {
}
#left-sidebar {
background: lime;
max-width: 25%;
}
#right-sidebar {
background: red;
max-width: 25%;
}