Jump to content

Horizontal and Vertical Objects in a Header

Recommended Posts

Dear all,


I have a code that is almost complete, but I am still struggling with header elements, and I am in desperate need for help.


The site is using the box model and is responsive;

Header area is 980px in width, 275px in height.

A YouTube video is linked, occupies 60% of the left width and takes the full height (275px)


I am struggling with the remaining 40%, in which I want:

At its bottom, a horizontal link box: height 75px, width 40% of the window, with 'Try the Offer' text.

Above the horizontal link two h1 lines on top of each other. Top h1 reads: Experience a Unique Offer.

Below h1 reads: Try it First.

At the top right corner, vertical flags for language links (e.g. US, France, Germany, etc.), all floating to the right.


I tried many attempts, but all failed. I would appreciate your help. Below html and css code.


<meta http-equiv="Content-Type" content = "text/html; charset=UTF-8" />
<meta name = "viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0,
initial-scale=1.0" />
<title><?php // Use a default page title if one wasn't provided...
if (isset($page_title)) {
echo $page_title;
} else {
echo 'Select From Our Amazing Producs!';
<link rel = "stylesheet" type="text/css" href="css/screen_layout_large.css" />
<!--Start of main page container-->
<div class = "page">
<!--Start of main header-->
<div class = "home_page_header"> <!--header of other pages is different -->
<iframe class = "mnvid" src="https://www.youtube-nocookie.com/embed/KSdk6poA4Ig?rel=0" frameborder="0" allowfullscreen></iframe>
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
body {
color: #575c7a;
line-height: 1.5em;
font-family: Arial;
font-size: 14px; /* base font*/
background: #515673 repeat-x 0px 0px;
.page {
max-width: 980px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
.home_page_header {
margin: 0px auto;
height: 275px;
header {
height: 275px;
background-size: 980px 275px;
background-color: #a6430a;
.mnvid { /*main video*/
width: 60%;
height: 275px;
margin: 0px;
display: inline;
vertical-align: middle;


Link to post
Share on other sites
<!DOCTYPE html><html><head>  <title>Styling the article element</title>    <style>*{  margin: 0px;padding: 0px;}body {color: #575c7a;line-height: 1.5em;font-family: Arial;font-size: 14px;  /* base font*/background: #515673  repeat-x 0px 0px; } .page {max-width: 980px; margin: 0px auto 0px auto;  position: relative; background-color: #fff;} .home_page_header {margin: 0px auto;height: 275px;} header {height: 100%; /*275px;*/ background-size: 980px 275px; background-color: #a6430a;} .home_page_header aside { width: 40%; height: 100%; background-color: yellow; float: left;position:relative;}.home_page_header aside .bottom_link { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px;}.home_page_header aside h1 span {display: block;}.home_page_header aside .lang {float: right; padding: 0 10px;}.mnvid { /*main video*/width: 60%;height: 100%; /*275px;*/margin: 0px; float: right; vertical-align: middle; }   </style></head><body><!--Start of main page container-->     <div class="page">     <!--Start of main header-->    <div class="home_page_header"> <!--header of other pages is different -->        <header> <aside><div class="lang">flags here</div><h1>Experience a Unique Offer.<span>Try it First.</span></h1><div class="bottom_link">Try the Offer</div></aside>           <iframe class="mnvid" src="https://www.youtube-nocookie.com/embed/KSdk6poA4Ig?rel=0" frameborder="0" allowfullscreen></iframe>
Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...