I have two columns 41% and 59% of the total screen width each. The height of the columns is 1102px.
In the first column I have 4 divs. The first one is for the navigation and it can be maximum 60px. The second one is for a logo I am using. The third one is for text and the fourth one is the trickiest one. I am using an image which does not have the same size and ratio. I want the image to get the 100% of the width.
My challenge is to get the height of the first image and the text divs to be dynamic depending on the heigh of the bottom image in the first column. For example, the margins are really big when the screen size is big :
body{
color: #fff;
font-family: Arial;
}
.wrapper{
background-color: #484848;
}
#col1{
float:left;
width:41%;
height: 1102px;
background-color: #E90649;
position: relative;
}
img#productImg{
width:100%;
height:auto;
}
img#product{
max-width:100%;
}
#col2{
float: left;
width:59%;
height: 1102px;
background-color: #124;
}
div #centerText{
width: 70%;
margin: 0 auto;
height:455px;
}
#productLogo{
margin-top: 2%;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 70%;
}
.list {
padding-right: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 4px;
color: #000;
font-size: 18px;
font-weight: lighter;
}
div.nav{
padding-top: 3%;
height:24px;
padding-left: 5%;
}
#productImg img{
width:100%;
position: absolute;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div id="col1">
<div class="nav">
<ul>
<li>HOME</li>
</ul>
</div>
<img id="productLogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"/>
<div id="centerText">
<h1>#############</h1>
<p2>#############</p2>
<h3>#############</h3>
</div>
<div id="productImg"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></div>
</div>
</div>
<div id="col2">aaaaaaaaa</div>
</body>
</html>
I used the #media screen-size feature but still I am not happy with the results as I have to put many lines in the CSS. Ideally, the part with the first logo (stackoverflow) and the text will be vertically aligned to center and the padding-top, padding-bottom will have the same value (percentage). The height of this div will depend on the height of the bottom image (JS parsing possible here?) and thus the text can be dynamic using the vw or vh in the CSS.
Is there an easier way to align the divs in the column and keep everything without breaking (that was the initial problem)?
Related
making a website for the first time and I found that when I zoom out, my layout size get messed up. can anyone help explain to me why? and how to fix it Thanks!
This is what its like at 100% zoom: http://puu.sh/peI6R/c7f45747a0.png
When I zoom out: http://puu.sh/peI80/f5fb16d6d0.png
Also, how can I make my footer have a vertical list on the left side? I tried using float: left but it just scrambled the words.
After trying to make this website, I realized that my CSS properties knowledge is HORRIBLE. I've only done the HTML/CSS/JS on Codecademy and maybe that's not enough, so any tips would be appreciated!
body {
margin: 5px 225px 225px;
background-color: #FFA500;
font-family: Comic Sans MS;
}
.banner {
background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
height: 250px;
background-size: cover;
background-position: center center;
margin: 0;
}
.heading {
text-align: center;
background-color: #3232FF;
border-bottom: 5px solid black;
}
.Content {
width: 900px;
height: 700px;
margin: auto;
background-color: white;
}
.Profile {
margin-left: 100px;
}
.mypic {
margin-left: 50px;
}
.footer {
width: 900px;
height: 120px;
color: black;
margin: auto;
background-color: #aaa;
}
.footer ul {
list-style: none;
}
.footer li {
display: block;
}
nav {
display: block;
background: #aaa;
}
ul {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px 100px;
}
a {
color: black;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: white;
}
<html>
<head>
<title>Simon's First Website!</title>
<meta charset="UTF-8">
<meta name="description" content="Simon's Portfolio">
<meta name="keywords" content="Simon Fu First Portfolio">
<meta name="author" content="Simon Fu">
<link rel="stylesheet" type="text/css" href="First.css">
</head>
<body>
<div class="banner"></div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
</ul>
</nav>
<div class="Content">
<div class="heading">
<img src="http://vignette1.wikia.nocookie.net/yogscast/images/c/c0/Simon_Banner_png.png/revision/20140308175434">
</div>
<div class="base">
<h1 class="Profile">Profile</h1>
<figure class="mypic">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" height="250" width="250">
<figcaption>My beautiful face</figcaption>
</figure>
</div>
</div>
<div>
<div class="footer">
<div align="center"><strong>Contact Me</strong></div>
<ul class="left">
<li>Email: dontmessiiii#gmail.com</li>
<li>Melee: JK</li>
<li>League of Legends: jk</li>
</ul>
</div>
</body>
</html>
What's happening?
Follow me
This is your layout, basically.
body
banner
nav
content
footer
As you don't use CSS to style our sections yet, all of them have width: auto. In simple words, and only to understand this problem, in the case we can say our sections have the width of your browser's window.
You styled your body element with margin: 5px 225px 225px, so in other words, bacause of the margin shorthand property:
top margin is 5px
right and left margins are 225px
bottom margin is 225px
So now our elements' width is the result of 100% (in this case, browser window's width) - 225px * 2 (because of left and right body's margins).
Then, you set content and footer's width to 900px
.content {
width: 900px;
}
footer {
width: 900px;
}
So, if you back to our layout we see that
body
banner has width: auto => browser window's width - 225 * 2
nav has width: auto => browser window's width - 225 * 2
content has width: 900px
footer has width: 900px
The width of content and footer are static, while the width of banner and nav depends of your browser window's width.
How to solve it
Defining the width of banner and navas you did with content and footer. You can do a div, called for example container to set the width off all element, so if you want to change it in the future you only have to modify one line.
.container {
width: 600px;
margin: 0 auto;
}
Height of .banner and nav must be defined like .Content and footer (900px). margin:0 auto is added to make it always center;
.banner, nav { width: 900px; margin:0 auto; }
Here's my Fiddle. This is for an information kiosk style layout so I'm trying to make sure all content is visible on the screen. I'm also trying to account for a few different screen sizes so I'm using all height/width in percentage.
I want all of the .menu_item divs match the same height as #panel but the overall height on the .menu_item divs adjust as page width changes. If you take a look at the bottom border of .menu_item:last-child, and compare it with the bottom border of #panel, you'll see what I mean.
My goal with all of the .menu_item divs is to have 2% of total the #menu height between each .menu_item and then then the .menu_item divs would all have the same height and fill the rest of the content area of #menu (but not exceed it).
I'm looking to implement a solution only using html/css.
HTML:
<body>
<div id="menu">
<div id="item1" class="menu_item"></div>
<div id="item2" class="menu_item"></div>
<div id="item3" class="menu_item"></div>
<div id="item4" class="menu_item"></div>
</div>
<div id="weather">
<div id="panel"></div>
</div>
</body>
CSS:
#menu, #weather {
box-sizing: border-box;
height: 100vh;
margin: 0;
padding: 2%;
}
#menu {
float: left;
width: 65%;
padding-right: 1%;
}
#weather {
float: right;
width: 35%;
padding-left: 1%;
}
.menu_item {
width: 100%;
height: 23.5%;
margin-top: 2%;
margin-bottom: 2%;
border: solid black 0.2em;
}
.menu_item:first-child {
margin-top: 0;
}
.menu_item:last_child {
margin-bottom: 0;
}
#panel {
border: solid black 0.2em;
width: 100%;
height: 100%;
}
Percentages in margin/padding are percentages of width, even for top and bottom values. (Similar question on SO, spec.)
If your goal is to have everything on the screen anyway, maybe you're interested in the vh unit, 1% of viewport height, supported in many modern browsers.)
I have two divs in my application. How can I make my left div to fit all space till right div. Right one can be text or image with any width.
<div id="header" class="header">
<div class="logo">
<img src="/Content/images/my_logo.png" alt="" />
</div>
<div class="logoClient">
Test Client /*here can be text or image with ANY SIZE */
</div>
<div class="clear"></div>
</div>
In this example I've done with fixed widths(700px and 200px), but this is wrong, because right one's text is dynamic and I want to left green bar be dynamic too.
http://jsfiddle.net/C5GL6/1/
Another approach with table, table-cell css options... but again... can't make left green bar fit all space.
http://jsfiddle.net/sjfQj/
How can I achieve this?
Remove width and add float:left to both the divs
.header
{
width: 950px;
font-family:Helvetica, Arial, sans-serif;
display:table
}
.logo {
height: 55px;
padding: 10px 20px;
background: #004B35;
display:table-cell;
}
.logoClient
{
display:table-cell;
height: 55px;
line-height: 55px;
padding: 10px 0px;
margin:0px -10px 0px 0px;
font-size: 30px;
color: #004B35;
overflow:hidden;
font-weight: bold;
text-align: right;
background: red;
}
DEMO Updated
Remove the width size in div
Edited fiddle
http://jsfiddle.net/C5GL6/2/
.logo {
float: left;
height: 55px;
padding: 10px 20px;
background: #004B35;
}
My body div collapses under the left bar navigation when i begin to minimize the window.
Can somebody please advise on what i have done wrong or what more i need to do.
Much appreciated, thank you.
css snippet:
#navigation {
float: left;
min-width: 20%;
margin: 0;
margin-top: 5px;
font-weight: normal;
}
#centerDoc {
float: left;
width: 80%;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 0px;
}
#header{
position: relative;
width:100%;
height:96px;
margin-left: 5px;
}
#footer {
font-family: Trebuchet MS;
font-size: x-small;
padding:2px;
margin:0px;
background-color:#CBE3F6;
color:#fff;
border-bottom: 1px solid #9EC4E2;
border-top: 1px solid #9EC4E2;
text-align:center;
width: 100%;
}
#wrapper{
position: relative;
margin-left: 5px;
}
#container {
width: 100%;
height:100%;
}
Template of a page:
<?php require_once 'includes/header.php';?>
<div id="wrapper">
<?php require_once 'includes/nav.php'; ?>
<div id="centerDoc">
</div> <!--centerDoc !-->
</div> <!-- wrapper !-->
</div> <!--container !-->
</body>
Remove float attribute from #centerDoc, and add margin-left: 20%. to it
Then change min-width: 20% in #navigation to width: 20% or max-width: 20%. Without this the text inside centerDoc flows under the #navigation.
You might want to keep your measurement synchronized. You have width: 80% in #centerDoc and min-width in #navigation. It might be easier to picture the layout if you'd used plain width in both occasions and assigned the min/max-width attributes to the body of the page (so the widths of the #navigation and #centerDoc are relative to the common parent of them).
Edit: CSS:
#navigation {
float: left;
width:20%;
}
#centerDoc {
width: 80%;
margin-left:20%;
}
#header{
width:100%;
height:96px;
}
#container {
max-width: 1200px;
min-width: 600px;
}
Removed the #wrapper. See the max-/min-width´ in the#container. The scrollbars appear into the browser when the page is less then 600 pixels wide. The page also doesn't become wider then 1200 px. This allows you to define thewidths of the#navigationand#centerDoc` as percentages.
With the following HTML everything should work properly. (Althought I don't know what's inside nav.php. Hopefully nothing that clears the floating of the #navigation)
<div id="container">
<?php //require_once 'includes/header.php';?>
<div id="navigation">
<?php //require_once 'includes/nav.php'; ?>
<p>Sample text. Sample text. Sample text. Sample text. Sample text.</p>
</div> <!--navigation !-->
<div id="centerDoc">
<p>Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.</p>
</div> <!--centerDoc !-->
</div> <!--container !-->
I would change min-width in #navigation to max-width.
That way we make sure that the left navigation bar has not more than the 20% of the width of the page.
Edit:
#navigation {
float: left;
width: 20%;
margin: 0;
margin-top: 5px;
font-weight: normal;
}
#centerDoc {
float: right;
width: 80%;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 0px;
}
I have a <div id="content">, which contains <div id="sub-navigation> and <div id="main container">, which themselves are inline-blocks. I would like to be able to make the main container fill the rest of the available page width. Is that possible?
I need columns-strip to expand or shrink based on the number and width of column elements. If the width of the columns-strip exceeds the width of the main container, then a horizontal scroll bar should appear.
* {
margin: 0px;
padding: 0px;
font-size: 10pt;
white-space: normal;
}
#wrapper {
margin: 0px 20px;
background-color: red;
}
#header {
margin: 25px 10px 10px 10px;
height: 50px;
background-color: purple;
color: white;
}
#content {
margin: 10px;
padding: 10px;
font-size: 0pt;
white-space: nowrap;
overflow: hidden;
background-color: white;
}
#sub-navigation {
width: 200px;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
display: inline-block;
overflow: auto;
background-color: yellow;
}
#columns-strip {
padding: 10px;
font-size: 0pt;
white-space: nowrap;
background-color: mediumturquoise;
}
.posts-column {
margin: 0px;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
overflow: auto;
}
#footer {
margin: 10px 10px 25px 10px;
height: 50px;
background-color: navy;
}
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="sub-navigation"></div>
<div id="main-container">
<div id="columns-strip">
<div class="posts-column" style="background-color: lightgray;"></div>
<div class="posts-column" style="background-color: darkgray;"></div>
<div class="posts-column" style="background-color: gray;"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
You have to remove the inline-block styles and float the #sub-navigation div. inline-block is not suited for what you are trying to achieve. When you add no display styles, the div element will be the default value which is block, block elements take up all the available space by default. By floating the #sub-navigation element you make it only take up the space required for its contents.
#sub-navigation {
width: 200px;
height: 150px;
float : left;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
overflow: auto;
background-color: yellow;
}
make sure to add a clear: left element after the #main-container
That's not how inline-blocks are supposed to be used. Best thing to do here is make your navigation box float:left and leave the default display value alone.
If your header, footer and wrapper have specific widths, then yes, you can have your main-container fill the available space. But if you're not specifying widths in your CSS, then you need to determine how big your main-container CAN be based on the rendered width of the containing element (wrapper). The only way to determine that width after the page loads is with javascript. If you want your site to have a dynamic width but still have your content (sub-navigation and main-container) fill the screen, you would either need to use javascript or percentages, and percentages can get ugly when you start looking at varying resolutions of monitors, laptops, etc...
Ever heard of flex box model!!
It is made just for that.
Note in flexbox model all child elements act as flex box model you cant opt out certain things. Which mean if page has navigation and under it content div + side div. You can't make top navigation out of it. Which has implications. So solution is to have all things only that need flex box in one div.