Highlighted

Working with 2 divs on the same page.

New Here ,
May 08, 2020

Copy link to clipboard

Copied

I am trying to  create two divs side by side. In the first div (left) there is a link with code to replace the content of the second div(right)  with a seperate page (login_new2.php) on the webiste. The concept would be to have a series on links within the left div to replace the right div with various pages within the website. Can someone help me?

 

 <title>CSS - Make Two DIVs Left and Right Aligned inside Main DIV.</title>
  <!--Example CSS-->
  <link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
  <style>
   .outerDiv
   {
    background-color: #006699;
    color: #fff;
    height: 400px;
    width: 1280px;
    margin: 0px auto;
    padding: 1px;
   }
   .leftDiv
   {
    background-color: #efefef;
    color: #000;
    height: 400px;
    width: 10%;
    float: left;
    
   }
   .rightDiv
   {
    background-color: #efefef;
    color: #000;
    height: 400px;
    width: 90%;
    float: right;
   }   
  </style>
 </head>
 <body style="text-align: center">
  <h1>CSS - Make Two DIVs Left and Right Aligned inside Main DIV.</h1>
  <div class="outerDiv">
   <div class="leftDiv">
    <a href="#rightDiv" onclick="login_new2.php">Click here</a>
   </div>
   <div class="rightDiv">
    This is Right DIV.
   </div>  
   <div "style: clear:both;"></div>

Views

745

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Working with 2 divs on the same page.

New Here ,
May 08, 2020

Copy link to clipboard

Copied

I am trying to  create two divs side by side. In the first div (left) there is a link with code to replace the content of the second div(right)  with a seperate page (login_new2.php) on the webiste. The concept would be to have a series on links within the left div to replace the right div with various pages within the website. Can someone help me?

 

 <title>CSS - Make Two DIVs Left and Right Aligned inside Main DIV.</title>
  <!--Example CSS-->
  <link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
  <style>
   .outerDiv
   {
    background-color: #006699;
    color: #fff;
    height: 400px;
    width: 1280px;
    margin: 0px auto;
    padding: 1px;
   }
   .leftDiv
   {
    background-color: #efefef;
    color: #000;
    height: 400px;
    width: 10%;
    float: left;
    
   }
   .rightDiv
   {
    background-color: #efefef;
    color: #000;
    height: 400px;
    width: 90%;
    float: right;
   }   
  </style>
 </head>
 <body style="text-align: center">
  <h1>CSS - Make Two DIVs Left and Right Aligned inside Main DIV.</h1>
  <div class="outerDiv">
   <div class="leftDiv">
    <a href="#rightDiv" onclick="login_new2.php">Click here</a>
   </div>
   <div class="rightDiv">
    This is Right DIV.
   </div>  
   <div "style: clear:both;"></div>

Views

746

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 08, 2020 0
Adobe Community Professional ,
May 08, 2020

Copy link to clipboard

Copied

We don't use Floats anymore.   See screenshot and code example below.

 

CSS FlexboxCSS Flexbox

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Centered, CSS Flexbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
/**Default mobile-first**/
.flex-container {
display:flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}

.flex-container > div {
width: 95%;
padding: 0.5%;
font-size: 1.25rem;
border:2px solid teal;
}
/**responsive image**/
.flex-container img { max-width: 100% }

figure, figcaption {
text-align:center;
margin: 0 auto;}

/* Media query for tablets & desktops */
@media only screen and (min-width: 680px) {

.flex-container {
display:flex;
flex-flow: row wrap;
align-items: center;
}

.flex-container > div {
width: 40%;
}
}
/**end of media query**/
</style>
</head>
<body>
<h1>Flexbox Vertically Centered</h1>
<div class="flex-container">
<div>
<figure>
<img src="https://dummyimage.com/500x500" alt="placeholder">
<figcaption>Caption</figcaption>
</figure>
</div>

<div>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure enim error sit quisquam ut, id, eveniet omnis repellat qui esse nam quae laborum modi voluptatum. Impedit nostrum unde, aliquam molestiae?</p>
</div>
</div>
</body>
</html>

 

Post back if you have any questions.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 08, 2020 1
New Here ,
May 08, 2020

Copy link to clipboard

Copied

Nancy;

 

Thanks for your input. I think there is some confusion? It your example let me try to explain it a little clearer. If one were to click on the picture div the result would be a web page would replace the wording on the right div. I hope this helps to explain my need a little more. Thanks for your inputs.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 08, 2020 0
LEGEND ,
May 09, 2020

Copy link to clipboard

Copied

Ask yourself the questions: 'Why am I considering this workflow. What are the benefits?'

 

Building a 'faux' single page application is of zero benefit and most likely in your case building a single page application correctly will be of little benefit. With todays fast http/2 web-servers there is really no need to do this unless youre a poor web-developer who uses dozens of calls to external js and css files, bloated frameworks, libraries, plugins etc.

 

In most cases there is little benefit in producing single page applications 'faux' or not. You would be better off just either building seperate pages or storing your pages information in a database, then using a single page to call the information into.

 

It's not difficult to do what you want with a little bit of javascript, but just inserting a page of information into a div comes at a cost, that being you cannot then provide a direct link to anyone, say for example your 'products' page. The only link you will be able to provide is a link to your 'home' page. To do this corrcetly you would have to build a genuine single page application, rather than a 'faux' one, which again isnt that complex but the benefits are minimal in cases where a website is streamlined and small.

 

Far too many developers these days use sledgehammer techniques and workflows to crack a nut, due to their lack of understanding and being brain-washed by developers who teach techniques being used by multi national companies, who may well need to use those workflows due to the complexity of their appplications and their servers, which are being hit 1000's of times a minute. The lack of common sense within web-development these days is simply mind-boggling.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2020 1
Adobe Community Professional ,
May 09, 2020

Copy link to clipboard

Copied

Are you looking to do something like this https://bunchoblokes.org/guides? This page cannot be classified as single page app (SPA), it merely loads the related content without a complete page refresh.

 

The site, however, is based on an SPA where the URL determines the view (content).

 

 

 


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2020 1
Adobe Community Professional ,
May 09, 2020

Copy link to clipboard

Copied

James,

I gave you a modern layout based on what you asked for, 2 side-by-side divs.  Nothing more, nothing less. 

 

The manner in which you program the application is up to you based on your coding skills, your hosting plan and what the client / stake holders expect.  Remember, good web sites are driven by good content, form and function, not gimmicks. 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2020 0
Adobe Community Professional ,
May 09, 2020

Copy link to clipboard

Copied

An example of a static site with a lot of content. For this project, I used Bootstrap and a data scrollspy approach.  Click a link on the left, content on the same page scrolls into place on the right.

http://capenet.org/brs.html

https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2020 0