Create header of webpage with three columns - html

This is in style.css:
#top{
background: white;
text-align: center;
height: 180px;
border-bottom: solid 1px #efeecc;
}
#topLogo{
background: yellow;
width: 25%;
float:left;
}
#topDescription {
background: red;
width: 75%;
text-align: center;
}
#topDepartment {
background: blue;
float:right;
width: 25%;
text-align: right;
}
This is index.html:
<div id="top">
<div id="topLogo">
<img src="img/book.jpg" width="170" height="160" border="0"/>
</div>
<div id="topDescription">
Page title
</div>
<div id="topDepartment">
Category
</div>
</div>
This is the expected outcome:
This is the current outcome:
http://jsfiddle.net/p2T5q/

Here's a demo: http://jsfiddle.net/p2T5q/7/
CSS:
#top{
background: white;
text-align: center;
display:table;
height: 180px;
border-bottom: solid 1px #efeecc;
}
#topLogo{
background: yellow;
width: 25%;
display:table-cell;
}
#topDescription {
background: red;
display:table-cell;
width: 50%;
text-align: center;
}
#topDepartment {
background: blue;
display:table-cell;
width: 25%;
text-align: right;
}

Well, the quick answer is that your div's total width is 125%, so you would need to change that so it equals 100%.
Second, you might want to put a clear fix on that top div so it encompasses all of the floating ones.
Also, don't use inline styles because you can put them in the CSS file. You are giving a fixed width to an image that sits inside a div with a percentage width. That is sure to break if the user reduces the size of his viewport.

Here you go, I fixed the fiddle and copied the answer here:
http://jsfiddle.net/p2T5q/2/
#top{
height: 180px;
border: solid 1px #555555;
position:relative;
}
#top * {
float:left;
}
#topLogo{
background: yellow;
width: 25%;
}
#topDescription {
background: red;
width: 50%;
}
#topDepartment {
background: blue;
width: 25%;
}
Basically make sure the width percentages add up to 100% and float all elements to left so they know in relation to what they should position themselves. You can use the * to select all subelements. I would appreciate you accepting this answer so I can finally get my 50 damn coins and make comments, lol.

Related

How to fix div alignment issue?

I’m working on a website in which at the bottom you can see the three social media accounts it has, but with the following code, this is the output, but I don’t know what’s causing it.
As you can clearly see, there is a grey box going over the three boxes, and I don’t know how to fix this.
.container {
width: 600px;
height: 190px;
background-color: #ff7675;
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
#st-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
#nd-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
margin-left: 20px;
}
#rd-box {
float: right;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
<div class="container">
<div id="st-box">
<iframe></iframe>
</div>
<div id="nd-box">
<iframe></iframe>
</div>
<div id="rd-box">
<iframe></iframe>
</div>
</div>
What can I do?
You should style your iframes. Here is some code that will help you on your way.
iframe {
display: block;
width: 100%;
border: 0;
}
The iframes inside your inner divs are causing these strange-looking borders. You can style them with css aswell.
For example, you might want to give them:
border:0;
width:100%;
The browser adds a default border to iframe. Give border: 0 to the iframe. Check screenshot.
iframe { border: 0; }

CSS texte and image alignement in %

I'm a real beginner in CSS...
Do you know how could I do this sort of alignment ? I try a lot a things but I don't get what I need... So I just draw it if you have any code idea...
<div id="sys-wrap">
<img src="image.png">
<p>Long message texte</p>
</div>
#sys-wrap {}
#sys-wrap p {
border: 1px solid #ffffff;
float:left;
margin: 15px;
width: 691px;
}
#sys-wrap img {
border: 1px solid #ffffff;
float: left;
margin: 15px 15px 15px 100px;
vertical-align: top;
}
Thanks!
(source: imgsafe.org)
I made a fiddle. Does this work for you?
https://jsfiddle.net/hnf8jou4/3/
HTML:
<div>
<div id="left">
<img src="http://lorempixel.com/400/200" id="inner">
</div>
<div id="right"></div>
</div>
CSS:
#left {
width:25%;
height:200px;
float: left;
background-color:#f00;
}
#right {
width:75%;
height:200px;
background-color:#0f0;
}
#inner {
display:block;
width:100px;
margin-left: auto;
margin-right: 0;
background-color: #00f;
}
It is really unclear what exactly you are trying to achieve. But since i saw the drawing u made i suppose this is what u need. U need to have a div for wrap and add float: right to the right div. The other things are just playing with height in % and paddings.
https://jsfiddle.net/hnf8jou4/4/
For #sys-wrap img inside of your CSS file, add a float: right; and a margin of 15px
Your new CSS should look similar to this:
#sys-wrap img {
width: 50px;
height: 50px;
border: 1px solid #ffffff;
float: right;
margin: 15px;
}
Also, give it's parent container a set width and height:
#sys-wrap {
width: 150px;
height: 150px;
background: red; // just to make it pretty
}
And just as a little fyi, vertical-align does not work, unless the specified element has a display of table-cell. :-)
Here's a fiddle: https://jsfiddle.net/d2ae3ub3/

Floating divs not floating left

Okay, so this is all supposed to be in one 139px height header and it renders as such in dreamweaver, but as soon as I view it in a browser the menu div splits down onto a second row.
Here's the HTML:
<div id="header">
<div id="header2">
<div id="title">
<img src="titleimg.png" border="0" />
</div>
<div id="menu">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
</div>
</div>
And here is the CSS:
#header {
top: 0;
left: 0;
position: fixed;
height: 139px;
width: 100%;
background-image: url('headerbg.png');
border-bottom: solid 1px #797978;
text-align: center;
display: inline-table;
}
#header2 {
width: 1040px;
margin: 0 auto;
text-align: left;
}
#title {
padding-top: 27px;
width: 287px;
height: 112px;
background-image: url('title3d.png');
background-repeat: no-repeat;
background-position: right bottom;
float: left;
}
#menu {
width: 753px;
height: 13px;
border-left: solid 1px #474747;
display: inline-table;
}
#one {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#two {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#three {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#four {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#five {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
Help would be greatly appreciated!
You are making the mistake of thinking your total width is 1040px by just adding up the width of #menu and #title but you are forgetting that you also have a 1px border-left on your #menu hence your width becomes 1041 and hence gets pushed over. so if you reduce either the menu or title's width by 1pixel you will be good to go :)
Also you can save some code on the css for the menu elements if you are going to repeat the same code for #one, #two etc etc:
#menu > div {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
The width of your title element is set to 287px; which is larger than the container.
I have tweaked up your code a little bit to make it sane.
http://jsfiddle.net/gwfQt/
The issue what you are actually facing is, you have divided the width of #title and #menu completely within 1040px which is the width of your header.
However, you didn't take into account that DIV within #menu has borders.
Also suggest you use classes if you have repetitive styles for different divs.
Let me know if I can improve my answer with better code.

Placing children div tags in horizontal, despite parent div tag width

Given this css:
#parent {
width: 100px;
height: 100px;
background-color: #090;
}
.childs {
width: 50px;
height: 50px;
background-color: #009;
border: 1px solid #999;
}
and this html:
<div id="parent">
<div class="childs"><p>aaa</p></div>
<div class="childs"></div>
<div class="childs"></div>
</div>
this is demo
http://jsfiddle.net/A3PJu/2/
I want that children divs placing in horizontal and not in vertical (as are they now), how make this?
float: left for children tags, not working in this case
You can use display:inline-block with white-space:nowrap. Write like this:
#parent {
width: 100px;
height: 100px;
background-color: #090;
white-space:nowrap;
font-size:0;
}
.childs {
width: 50px;
height: 50px;
background-color: #008;
border: 1px solid #999;
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
white-space:normal;
font-size:13px;
vertical-align:top;
}
Check this http://jsfiddle.net/A3PJu/3/
The problem is that the width of the parent element is not big enough for 3 times 50px .childs. If you increase the #parent width to say 200px, float: left will work.

Expand DIV vertically to fill the remaining space in nonfixed height column

I have the following DIVs structure:
<div id="d1">
<div id="d2">
</div>
<div id="d3">
<div id="d4"></div>
<div id="d5"></div>
</div>
</div>
DIV d2 is the left column (float: left), while d3 is on the right (float: right). d4 and d5 all go into right column d3, one below the other. The widths are all fixed.
DIVs d4 has fixed height of 300px.
The content of div d2 has dynamic height but it is at least 300px high.
My goal is to make DIV d5's height to fill the remaining space in the right column (d3) so that the total height of this column is equal to the dynamic height of the left column (d2).
I would like a pure CSS solution, no JS.
This is the CSS I am using:
#d1 {
width: 990px;
border: 1px solid black;
background-color: pink;
}
#d2 {
float: left;
width: 300px;
background-color: yellow;
}
#d3 {
float: right;
width: 690px;
}
#d4 {
background-color: blue;
width: 690px;
height: 300px;
}
#d5 {
background-color: brown;
width: 690px;
}
You can use display: tale; and table-cell; with a heightof 100% on d5.
#d1 {
width: 990px;
border: 1px solid black;
background-color: pink;
padding: 3px;
display: table;
height: 10000px;
}
#d2 {
display: table-cell;
width: 300px;
background-color: yellow;
}
#d3 {
display: table-cell;
width: 690px;
}
#d4 {
background-color: blue;
width: 690px;
height: 300px;
}
#d5 {
background-color: brown;
width: 690px;
height: 100%;
}
http://jsfiddle.net/nnjse/1/
Add to main block #d1 border-right 690px and using negative margin -690px put right column #d3 over it. Border will look like right column's background. If #d2 gets higher #d1's border will make illusion that right column fills whole parent height. The same principle with negative margins but in vertical direction can be used for #d4 and #d5.
#d1{
width:300px;
margin:0 auto;
border-right:690px solid #a52a2a;
background:#ffff00;
}
#d2{
width:300px;
float:left;
}
#d3{
width:690px;
float:right;
margin-right:-690px;
border-top:300px solid #EEE;
background:#a52a2a;
}
#d4{
height:300px;
margin-top:-300px;
background:#0000ff;
}
#d5{
height:100%;
}