I am trying to edit the content on standard notification. I want to split the body into two equal columns. When I try doing that in the HTML it always mess the CSS and automatically re-write it.
I am adding the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.column-left {
float: left;
width: 50%;
padding: 10px;
height: 300px;
}
.column-right {
float: right;
width: 50%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Two Equal Columns</h2>
<div class="row">
<div class="column-left" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>text</p>
</div>
<div class="column-right" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>text</p>
</div>
</div>
</body>
But as soon I hit "ok" it re-write it to this:
<html>
<head>
<style type="text/css">.c0 { font-family: 'Arial' } .c1 { margin: 0px 0px 14px; font-size: 18px; font-weight: bold } .c2 { padding: 10px; background-color: #aaaaaa } .c3 { margin: 0px 0px 13px } .c4 { padding: 10px; background-color: #bbbbbb } </style>
</head>
<body class="c0">
<div class="c1">Two Equal Columns</div>
<div>
<div class="c2">
<div class="c1">Column 1</div>
<p class="c3">text</p>
</div>
<div class="c4">
<div class="c1">Column 2</div>
<p class="c3">text </p>
</div>
</div>
</body>
</html>
Unfortunately, Archer pretty much "dumbs" down the HTML formatting permitted in notifications. The best you can get away with is using tables instead of CSS to do columns.
Since you want equal columns with any content, you can Choose the 'Body Layout' in the Notification as 'Two Column 50-50'.
That way, you can add any dynamic content within the two columns.
You can use css grid
Css Grid is good documentation
.row {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
}
<div class="row">
<div class="column-left" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>text</p>
</div>
<div class="column-right" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>text</p>
</div>
</div>
Related
Problem:
I'm unable to limit scrolling to the content area of a typical Vue 3 SPA (scroll bar should not extend into header and footer areas). The Header and Footer blocks are placed with the Bootstrap fixed-top and fixed-bottom classes. It's a little hard to see in the attached image, but the current content area extends behind the header and footer. The header and footer are built from the Bootstrap components library. I can fix the content visibility with padding, but that doesn't address the overflow (scrollbar) issue.
Actions Taken
I've tried many solutions to similar questions, but those solutions have generally applied to earlier versions of Vue and Bootstrap and don't seem to work for me. I'm able to generate my desired layout in vanilla html and Bootstrap--it seems like it's the Vue 3 injection process that's tripping me up. I've tried applying layouts to both index.html and App.vue without success (trying both Bootstrap classes and vanilla css). The Bootstrap dependency appears to be working properly, so I don't think that's the issue (Bootstrap 5 not Bootstrap-Vue).
Desired Outcome:
Limit scrolling to content area while keeping header and footer Navbars fixed to their positions (and visible at all times).
Environment
Code snippets are used for readability (won't run in place). The below code has all (or nearly all) placement attempts stripped since they didn't work.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="../public/favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- <script>window.scrollTo(0,1) // this is meant to hide the address bar in mobile Safari on page load.</script>-->
</head>
<body>
<noscript>
<strong>The <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files are auto injected here -->
</body>
</html>
App.vue
<template>
<div id="wrapper" class="m-1">
<div id="header_area">
<Header/>
</div>
<div id="content_area">
<span class="page-title">{{ title }}</span>
<hr class="border-secondary">
<span class="page-content">{{ content }}</span>
<router-view #page-data="updatePageName($event)"/>
</div>
<div id="footer_area">
<Footer/>
</div>
</div>
</template>
<script>
import Header from '#/components/Header.vue'
import Footer from '#/components/Footer.vue'
export default {
data() {
return {
title: "home",
content: ""
}
},
components: {
Header,
Footer,
},
methods: {
updatePageName: function(event) {
this.title = event.title;
this.content = event.content;
}
}
};
</script>
<style>
#import'~bootstrap/dist/css/bootstrap.css';
#import "./assets/main.css";
</style>
Header.vue (partial)
<template>
<div>
<nav class="Header navbar navbar-expand-sm navbar-dark bg-dark border-bottom border-4 fixed-top" aria-label="Header Bar">
<div class="container-fluid">
<router-link to="/"><span class="navbar-brand">brand</span> </router-link>
<button class="navbar-toggler btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item dropdown">
<router-link to=""><a class="nav-link dropdown-toggle" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">pages</a></router-link>
<ul class="dropdown-menu bg-dark" aria-labelledby="dropdown01" id="dave">
[snip]
main.css
#charset "utf-8";
#font-face {
font-family: 'Lato-Light';
src: local('Lato-Light'), url('Lato-Light.ttf') format("truetype");
}
:root {
--background: #191919;
--dark: #000000;
--grey1: #111111;
--grey2: #222222;
--grey3: #333333;
--grey4: #444444;
--grey5: #555555;
--grey6: #666666;
--grey7: #777777;
--grey8: #888888;
--grey9: #999999;
--light: #FFFFFF;
}
html, body {
background-color: var(--dark) !important;
color: var(--light) !important;
}
a {
color: var(--bs-secondary) !important;
text-decoration: none;
}
body {
font-family: Lato-Light, sans-serif;
font-size: 0.9em;
}
button {
padding: 1px;
}
input {
border: solid 1px var(--grey9);
border-radius: 5px;
box-sizing: border-box;
padding: 5px;
}
li {
float: left;
margin: 0 5px;
padding: 0 2px;
text-align: start;
}
ul {
list-style-type: none;
padding: 0;
}
.dropdown-item {
border: solid 1px var(--bs-dark);
color: var(--bs-secondary) !Important;
/*font-size: 0.9rem;*/
width: 94%;
}
.dropdown-item:hover {
background-color: var(--bs-dark) !important;
border: solid 1px var(--bs-secondary);
border-radius: 5px;
width: 94%;
}
.dropdown-menu {
background-color: var(--bs-dark) !important;
border: solid 1px var(--bs-dark) !important;
color: var(--bs-secondary) !Important;
/*font-size: 0.9rem !important;*/
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
border: solid 1px var(--bs-dark) !important;
color: var(--bs-secondary) !Important;
/*font-size: 0.9rem !important;*/
left: 100%;
top: 0;
}
.dropdown-toggle::after {
display: none;
}
.navbar {
border-bottom-color: var(--dark) !important;
border-top-color: var(--dark) !important;
margin-bottom: 0;
}
.navbar-brand {
border: solid 1px var(--bs-dark);
border-radius: 5px;
color: var(--bs-secondary) !important;
padding: 5px;
}
.navbar-brand:hover {
border: solid 1px var(--bs-secondary);
border-radius: 5px;
}
.nav-link {
background-color: var(--bs-dark) !important;
border: solid 1px var(--bs-dark);
border-radius: 5px;
color: var(--bs-secondary) !important;
}
.nav-link:hover {
border: solid 1px var(--bs-secondary);
border-radius: 5px;
}
.nav-link.dropdown-toggle {
padding: 8px;
}
.navbar-nav li:hover > ul.dropdown-menu {
border: solid 1px var(--grey5) !important;
color: var(--bs-secondary) !Important;
display: block;
}
.page-title {
color: var(--grey5);
font-size: 2rem !important;
text-align: left !important;
}
.page-content {
}
.selected {
border-color: lime !important;
}
#app {
}
#header_area {
}
#content_area {
}
#footer_area {
}
#Footer {
font-size: 0.9em;
}
:focus {
border-color: var(--dark);
box-shadow: none;
outline: none;
}
This is how I was able to get the CSS Grid spec to work. For my situation, adding styles to <html> and <body> in index.html was important, but may not be required. Assigning !Important to the grid elements may also not be required, but was done for insurance.
Now, any content that is injected by the Vue Router will appear in content_area and only that section will scroll (as needed).
App.vue
<template>
<div class="app m-1">
<div id="header_area">
<Header/>
</div>
<div id="content_area">
<span class="page-title">{{ title }}</span>
<hr class="border-secondary">
<span class="page-content">{{ content }}</span>
<router-view #page-data="updatePageName($event)"/>
</div>
<div id="footer_area">
<Footer/>
</div>
</div>
</template>
<script>
import Header from '#/components/Header.vue'
import Footer from '#/components/Footer.vue'
export default {
data() {
return {
title: "home",
content: ""
}
},
components: {
Header,
Footer,
},
methods: {
updatePageName: function(event) {
this.title = event.title;
this.content = event.content;
}
}
};
</script>
<style>
#import'~bootstrap/dist/css/bootstrap.css';
#import "./assets/navbar.css";
#import "./assets/main.css";
</style>
index.html
<!DOCTYPE html>
<html lang="en" style="margin: 0;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="../public/favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body style="margin: 0; overflow: hidden;">
<noscript>
<strong>The <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files are auto-injected here -->
</body>
</html>
main.css
.app {
height: 100vh !important;
display: grid !important;
grid-gap: 5px !important;
grid-template-columns: 1fr !important;
grid-template-rows: 65px 1fr 40px !important;
grid-template-areas: "header" "content" "footer" !important;
}
#header_area {
grid-area: header !important;
}
#content_area {
grid-area: content !important;
overflow: auto !important;
}
#footer_area {
grid-area: footer !important;
}
Plain HTML example
body {
background-color: red;
margin: 0;
}
.container {
height: 100vh;
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr;
grid-template-rows: 70px 1fr 40px;
grid-template-areas: "header" "content" "footer";
}
.H {
grid-area: header;
background-color: blue;
color: white;
}
.C {
grid-area: content;
background-color: darkgreen;
color: white;
padding: 15px 5px 10px 5px;
overflow: auto;
}
.F {
grid-area: footer;
background-color: blue;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="H">header</div>
<div class="C">
content
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br>
</div>
<div class="F">footer</div>
</div>
</body>
</html>
I want set my carousel in the middle of the page with a white border attached to it. But I'm unable to do it. I used padding but the border is not adjusting with the carousel. If I reduce a little more the padding then the carousel arrows is not shifting with carousel.
Here is my html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/prefixfree.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#featured"><h1>Carousel <span class="subhead">Practice</span></h1></a>
</div><!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Mission</li>
<li>Services</li>
<li>Staff</li>
<li>Testimonials</li>
</ul>
</div><!-- collapse navbar-collapse -->
</div><!-- container -->
</nav>
<div class="container wrapping">
<div class="carousel slide" data-ride="carousel" id="featured">
<div class="carousel-inner">
<div class="item active"><img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"></div>
<div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div>
<div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div>
<div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div>
<div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#featured" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#featured" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- featured carousel -->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/myscript.js"></script>
</body>
</html>
This is my css:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700);
/** Basic Page CSS **/
body{
font-family: "Roboto Slab", sans-serif;
font-weight: 300;
font-size: 2em;
position: relative;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", sans-serif;
font-weight: 100;
margin: 0;
}
header{
background-color: #00173f;
}
.carousel-inner{
padding: 150px 30px 100px 30px;
border: 15px solid #fff; border-radius: 5px;
}
/** Header Navigation **/
header .navbar {
padding: 30px 0;
transition: all .5s ease-out;
}
header .navbar-default {
background-color: transparent;
border: none;
}
header .navbar-default .navbar-nav a {
color: white;
padding: 5px 8px;
}
header .navbar-default .navbar-nav a:hover {
color: #EEC856;
}
header .navbar-default .navbar-nav .active a {
font-weight: 700;
color: #EEC856;
background: transparent;
border-bottom: 4px solid #EEC856;
text-shadow: none;
}
header .navbar-default .navbar-nav .active a:hover {
color: #E15D5F;
background: transparent;
text-shadow: none;
}
/** Navbar Brand **/
header .navbar-brand {
background: url(../images/wisdompetlogo.svg);
background-repeat: no-repeat;
background-position: 15px 0;
height: auto;
}
header .navbar-brand h1 {
color: white;
margin: 0;
font-size: 1.8em;
font-weight: 400;
padding-left: 105px;
}
header .navbar-brand span.subhead {
display: block;
font-family: "Roboto Slab", serif;
font-size: .6em;
font-weight: 100;
}
/** Navbar Toggle **/
header .navbar-toggle {
background-color: #279182;
}
header .navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
#media only screen
and (max-width: 768px) {
header .navbar-collapse.in {
background-color: rgba(0,0,0, .5);
}
}
This is one of my images link: https://www.google.co.in/search?q=wisdom+pet+medicine&espv=2&biw=1280&bih=614&source=lnms&tbm=isch&sa=X&sqi=2&ved=0ahUKEwiejtTiqs7PAhWBPo8KHXsbDlwQ_AUIBigB&dpr=1.5#imgrc=uU4osiOZHZGu9M%3A
I'm not entirely sure if your problem is the border, the positioning, or both.
You have your carousel wrapped in your header. This might prevent it from being positioned in the middle of your page. If you want it to be in its own section I would put it in a container-fluid div class and add styling as desired.
I am having hard time figuring out how to fix a small alignment issue as shown in the fiddle. The text box and 'R' bootstrap label is not aligned on the top.
https://jsfiddle.net/haribalaji/p7Louzq9/
.inline-form-control
{
display: inline-block;
width: 90%;
}
.labelClass
{
display: inline-block;
height: 40px;
}
.label-primary {
background-color: #337ab7;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Here is the code
<code>
<form>
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="form-group">
<label for="adrTerm"><span>Adverse Reaction Term</span><span style="color:red;">*</span></label>
<div class="field"><input type="text" name="adrTerm" class="inline-form-control form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1"><span class="labelClass label label-primary">R</span>
<div class="input"></div>
</div>
</div>
</div>
</form>
</code>
This fiddle demonstrates the "R" label being the same height as the input and aligned to its right.
As mentioned in the comments earlier, the markup needed to be much simpler:
<div class="container">
<form>
<div class="form-group">
<label for="adrTerm" class="col-xs-12 control-label text-left">Adverse Reaction Term<span style="color:red;">*</span></label>
<div class="col-xs-11">
<input type="text" name="adrTerm" class="form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1">
</div>
<div class="col-xs-1">
<label class="text-center rLabel">R</label>
</div>
</div>
</form>
</div>
And also, very little custom CSS is required:
.container {
margin: 10px
}
.rLabel {
padding-top: 6px;
padding-bottom: 6px;
background-color: #337ab7;
margin-left: -30px;
color: #fff;
width: 80%;
}
This still may not give you exactly what you want. For example, you may not care for how the "R" label will change width when the window is resized. If so, change the width in the .rLabel class to a fixed width.
Note how the Bootstrap styles are added to the fiddle as an external resource.
Also, note that the use of a container is required.
Updated link to JSFIDDLE
.labelClass
{
display: inline-block;
position:absolute;//added
}
.label {
display: inline;
padding:0 0.6em;//changed
font-size: 75%;
font-weight: 700;
line-height: 1.8;//changed
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Make label position absolute,
Removed unnecessary padding,
Changed line height of label.
Use input group add-on of bootstrap if you are using.
http://v4-alpha.getbootstrap.com/components/input-group/
I'm trying to create this navigation menu and something seems to keep screwing up when I add my logo. the header-right keeps moving down. I have tried different things but none seem to work. Maybe you can see my mistake.
Here is my JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
background-color: #ccc;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
.header {
background: -webkit-linear-gradient(#25292C, #1E2224);
background: -o-linear-gradient(#25292C, #1E2224);
background: -moz-linear-gradient(#25292C, #1E2224);
background: linear-gradient(#25292C, #1E2224);
height: 100px;
width: 100%;
position: relative;
z-index: 1;
overflow: hidden;
}
.header-cover {
width: 780px;
height: 100px;
margin: auto;
}
.header-left {
width: 240px;
float: left;
height: 100px;
}
.header-right {
width: 240px;
float: right;
height: 100px;
}
.bar {
width: 120px;
height: 100px;
float: left;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.logo {
height: 50px;
width: 50px;
margin: auto;
}
.logo img {
padding-top: 15px;
display: block;
margin: auto;
position: relative;
z-index: -1;
}
.top {
height: 0px;
width: 120px;
background-color: #535557;
position: relative;
z-index: 1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.text {
font-family: roboto;
font-size: 21px;
color: #fff;
text-align: center;
margin-top: 35px;
letter-spacing: 1px;
position: relative;
z-index: 10;
}
.bar:hover .top {
padding-bottom: 20px;
}
.bar:hover .text {
color: #fff;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Website NabBar Template</title>
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="header">
<div class="header-cover">
<div class="header-left">
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">HOME</div>
</div>
</a>
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">SHOP</div>
</div>
</a>
</div>
<div class="logo">
<img src="http://i.imgur.com/Gghu413.png"/>
</div>
<div class="header-right">
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">STAFF</div>
</div>
</a>
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">FORUMS</div>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
It is because you are using the CSS property display: block, while the header-cover div is using display: relative. Combined with the float: left and float-right of each of your header elements, in the order you displayed, the logo height is pushing down the div containing the .header-right
Try organizing your header like this:
<div class="header-cover">
<div class="header-left">
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">HOME</div>
</div>
</a>
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">SHOP</div>
</div>
</a>
</div>
<div class="header-right">
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">STAFF</div>
</div>
</a>
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">FORUMS</div>
</div>
</a>
</div>
<div class="logo">
<img src="http://i.imgur.com/Gghu413.png"/>
</div>
</div>
That way your logo with margins: auto gets rendered after your left and right header sections.
New Fiddle
Im just new to CSS:
And my problem is My Logo shows up but it's in the back and Should I put my div:top-most into the wrapper? because if I put my div:top-most, it will be shown along with the logo, but I want my lime color to be put on the max width of my browser..
Here's my HTML Code
<body>
<div id="top-most">
</div>
<div id="wrapper">
<img alt="logo" src="images/logo.png" /><div id="wrapper">
</div>
<div id="header">
<p>Put something here</p>
</div>
</body>
And here's my CSS Code:
#top-most { background-color: lime; height:51px ;width:100%; position:absolute; }
#wrapper { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#logo { margin: 19px 0 0 10px; position:absolute; top: 0px; z-index:2; }
#header { margin: 30px 0 0 20px; float:right; width: 750px; }
#header p { color: #979899; }
And here's the output:
http://imgur.com/gWDNYGB
Hello :) you need to put #wrapper in #top-most.
<body>
<div id="top-most">
<div id="wrapper">
<img alt="logo" src="http://placekitten.com/200/300" />
</div>
</div>
<div id="header">
<p>Put something here</p>
</div>
</body>
I edited your Css code too.
#top-most { background-color: lime; padding: 5px; position:absolute; }
#wrapper { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#logo { margin: 19px 0 0 10px; position:absolute; top: 0px; z-index:2; }
#header { margin: 30px 0 0 20px; float:right; width: 750px; }
#header p { color: #979899; }
You don't need padding: 5px; in #top-most but it will look better
Demo