Member Avatar for steven01

I use a script to generate some contennent at my site,but the left of the page is blank.How to make up it?

  • 2 Contributors
  • 5 Replies
  • 202 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

A quick clarifier and a practical, up-to-date approach.

Summary: is injecting content with a remote script and wants another column of content on the right. is correct that the page needs two block containers; floats were a common 2005 solution, but modern CSS (flexbox or grid) is simpler, more robust, and responsive by default.

Example (HTML + CSS using flexbox — place the external script tag inside the left column so its output stays there):

<div class="columns">
  <div class="left">
    <!-- external script that generates the left content -->
    <script src="external-widget.js"></script>
  </div>

  <div class="right">
    <!-- static or other dynamic content for the right column -->
    <nav>Related links, search, or widgets</nav>
  </div>
</div>

<style>
.columns { display:flex; gap:16px; align-items:flex-start; }
.left { flex:0 0 300px; box-sizing:border-box; }
.right { flex:1 1 auto; box-sizing:border-box; }

/* simple responsive fallback */
@media (max-width:700px) { .columns { flex-direction:column } }
</style>

Troubleshooting notes and gotchas:

  • Placement matters: scripts that use document.write produce output exactly where the script tag sits. Put that tag inside the left container. Scripts that append to body or use JSONP may not respect placement — inspect the DOM in DevTools to see where nodes actually land.
  • Mixed-content and blocking: an HTTP script on an HTTPS page will be blocked by modern browsers. Check the console for blocked loads or CORS errors.
  • Width math: ensure column widths plus gaps don’t exceed the page/container width; use box-sizing:border-box to avoid surprises from padding/borders.
  • If sticking with floats (older approach), remember to clear floats (clearfix or an enclosing overflow:auto) to keep layout stable.

If the remote script fails or is slow, include fallback content or a placeholder in the right column so the page still looks complete.

Recommended Answers

All 5 Replies

Member Avatar for tgreer

Your question, as asked, is impossible to answer. You've left us too much to guess. What kind of script? What kind of content? Is this a CSS question relating to placement of HTML elements? Margins? Padding? Centering? Or are you asking for suggestions as to what kind of generic content you could place on your site? What does "make up it" mean?

Member Avatar for steven01

this is the script:

<script type="text/javascript"
   src="">
</script>

It generates some content, but the page's right is blank. I want to add some content at the right.

Member Avatar for tgreer

You still haven't given us enough information to give you a meaningful answer.

You can add content to your web pages by writing HTML. You can position that content, to the left, or the right, with CSS.

What content do you want to add? How? Where? When? I just don't understand what you're asking.

Member Avatar for steven01

I'm just a begainner:)Is it possible also add contennent supplied by script to make up the blank?

Member Avatar for tgreer

Ok, I think I'm understanding now.

The way to create a page with two separate "content sections" is to arrange the content into separate block-level elements.

You can do this with a TABLE, or with DIV elements.

A DIV looks like:

<div id="leftSide">
Place whatever HTML you want here, 
including scripts that generate content.
</div>

<div id="rightSide">
Place whatever HTML you want here, 
including scripts that generate content.
</div>

Normally, the second DIV would display below the first DIV. You can change this behavior with CSS. The CSS attribute you'd use would be "float".

Here is a complete, though very simplistic, example:

<html>
<head>
<style type="text/css">
.left
{
  float:left;
  width:250px;
}
.right
{
  float:right;
  width:250px;
}
</style>
</head>

<body>


<div id="leftSide" class="left">
Place whatever HTML you want here, 
including scripts that generate content.
</div>

<div id="rightSide" class="right">
Place whatever HTML you want here, 
including scripts that generate content.
</div>

</body>
</html>

You should tinker with this, look up the CSS "float" attributes, understand what they do, as well as the other CSS properties (such as "width"). Learn the difference between CSS "class" definitions and "id" definitions.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.