Skip to main content
J
Jad4137
Participating Frequently
May 8, 2020
Question

Working with 2 divs on the same page.

  • May 8, 2020
  • 2 replies
  • 1271 views

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>

    This topic has been closed for replies.

    2 replies

    J
    Jad4137Author
    Participating Frequently
    May 9, 2020

    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.

    O
    osgood_
    Legend
    May 9, 2020

    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.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      May 8, 2020

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

       

       

      <!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— Product User & Community Expert
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices