What steps can I take to prevent an HTML box from appearing too close to one side of the screen?

My current goal is to achieve this layout (without the red arrows, of course):

https://i.sstatic.net/Mm1rB.png

However, I have encountered a CSS issue that I can't seem to figure out on my own. When I view my page, it appears like this:

https://i.sstatic.net/6tQtk.jpg

Below is the code snippet for the webpage:

body{
    font-family:arial;
    font-size:12px;
}

#contenedor{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid#666;
}

/* More CSS code... */

#carreras ul {
    margin-left:10px;
    list-style-type:none;
}
<!doctype html>
<html>
    <head>
        <title>Infosil</title>
        <link rel="stylesheet" href="infosil.css">
        </head>
    <body>
        <!-- HTML code here -->
    </body>
</html>

I have identified an issue in the bloque li and carreras ul sections of the CSS, and I would greatly appreciate any assistance in resolving it.

Thank you in advance for your help.

htmlcss

Answer №1

Have you considered using a grid library for your CSS? One popular option is available at http://getbootstrap.com/css/

As a quick solution, you can check out this https://jsfiddle.net/rdrchdtw/1/

#bloque li{
   border:1px solid gray;
   padding:7px;
   list-style-type:none;
   //margin-left:25.9%;  //Remove this
}

#carreras ul {
    margin-left:10px;
    list-style-type:none;
    margin-left:27%;     //Add this
    padding-left:0px;    //Add this
}

Answer №2

body{
    font-family:arial;
    font-size:12px;
}

#contenedor{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid#666;
}
#cabecera{
    background-image: url(http://content.escuelaninja.com/images/infosil.png);
    min-height:100px;
}
#cabecera span{
    float:right;
    color:#fff;
    margin-top:20px;
    margin-right:20px;
}
#barra{
    padding:10px;
    background-color:#0e1a46;
    color:white;
}
#barra a {
    color: white;
}
#barra span{
    float:right;
}
#pie {
    text-align:center;
    color: #fff;
    background-color:#666;
    padding:10px;
    clear:both;
}
#barra-lateral{
    float:left;
    min-height:200px;
    width:25%;
}
#principal{
    margin-left:25%;
}
#barra-lateral nav { 
    border: 1px solid #c5c5c5;
    border-radius:6px;
    background-color:#f0f0f0;
    margin:15px;

}
#barra-lateral nav section{
    margin:6px;
}
#barra-lateral nav section header{
    padding:8px;
    font-weight:bold;
    color: #fff;
    background-color:#225ea2;
}
#barra-lateral ul{
    background-color:#fff;
    margin:0;
    padding-left:0;
    list-style-type:none;

}
#barra-lateral ul li{
    padding:4px;
    padding-left:15px;
}
#mis-cursos{
    color:#0e1a46;
    text-align:center;
}
#lol{
    border:1px solid black;
    margin-right:10%;
    margin-top:0;
    clear:right;
    background-color:#12306b;
    color:white;
    padding:10px;
}
#bloque{
       border:1px solid gray;
    margin-right:10%;
    margin-top:0%;
    background-color:#eaeaeb;
}
#bloque li{
    border:1px solid gray;
    padding:7px;
    list-style-type:none;

}
#carreras {
margin-left: 260px;
}
#carreras ul {
    list-style-type:none;
    padding: 0;
}
<!doctype html>
<html>
    <head>
        <title>Infosil</title>
        <link rel="stylesheet" href="infosil.css">
        <link rel="stylesheet" href="sample.css">
    </head>
    <body>
        <section id="contenedor">
            <header id="cabecera">
                <span>Gianmarti Meza Machaca</span>
            </header>
                <div id="barra">
                    <a href="" >inicio</a>
                    <a href="">Cerrar sesión</a>
                    <span>Viernes 26 de agosto de 2016</span>
                </div>
                <aside id="barra-lateral">
                    <nav>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registrar notas</li>
                                <li>>Mensajes</li>
                                <li>>Publicar materiales</li>
                            </ul>
                        </section>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registro docente</li>
                                <li>>Mis capacitaciones</li>
                            </ul>
                        </section>
                    </nav>
                </aside>
                <h1 id="mis-cursos">Mis cursos</h1>
                <section id="carreras">
                            <header id="lol">USIL - CARRERAS UNIVERSITARIAS : Periodo - 2016-02 </header>
                            <ul id="bloque">
                                <li>TALLER DE SOFTWARE II (FC-INF TALLSFW2) - Bloque: FC-PREINF02C1M</li>
                                <li>ANÁLISIS Y DISEÑO DE DATOS (FC-INF ANADISDA) - Bloque: FC-PREINF02P1T</li>
                            </ul>
                        </section>
                <section id="principal"></section>
                <footer id="pie">UNIVERSIDAD SAN IGNACIO DE LOYOLA / Av. La Fontana 550, La Molina Lima - Perú Central Telefónica (511) 317 - 1000</footer>
        </section>
    </body>
</html>

Answer №3

Looks like the issue has been resolved!

:)

body{
    font-family:verdana;
    font-size:14px;
}

#container{
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid#999;
}
#header{
    background-image: url(https://example.com/image.png);
    min-height:120px;
}
#header span{
    float:right;
    color:#000;
    margin-top:25px;
    margin-right:25px;
}
#navbar{
    padding:15px;
    background-color:#333;
    color:white;
}
#navbar a {
    color: white;
}
#navbar span{
    float:right;
}
#footer {
    text-align:center;
    color: #fff;
    background-color:#888;
    padding:15px;
    clear:both;
}
#sidebar{
    float:left;
    min-height:250px;
    width:30%;
}
#main-content{
    margin-left:30%;
}
#sidebar nav { 
    border: 1px solid #ddd;
    border-radius:8px;
    background-color:#f5f5f5;
    margin:20px;

}
#sidebar nav section{
    margin:8px;
}
#sidebar nav section header{
    padding:10px;
    font-weight:bold;
    color: #000;
    background-color:#4499ff;
}
#sidebar ul{
    background-color:#eee;
    margin:0;
    padding-left:0;
    list-style-type:none;

}
#sidebar ul li{
    padding:5px;
    padding-left:20px;
}
#my-courses{
    color:#333;
    text-align:center;
}
#announcement{
    border:1px solid black;
    margin-right:15%;
    margin-top:0;
    clear:right;
    background-color:#6622cc;
    color:white;
    padding:15px;
}
#block{
       border:1px solid grey;
    margin-right:15%;
    margin-top:0%;
    background-color:#e5e5e5;
}
#block li{
    border:1px solid grey;
    padding:8px;
    list-style-type:none;

}
#degree {
margin-left: 300px;
}
#degree ul {
    list-style-type:none;
    padding: 0;
}
<!doctype html>
<html>
    <head>
        <title>Example</title>
        <link rel="stylesheet" href="example.css">
        <link rel="stylesheet" href="sample.css">
    </head>
    <body>
        <section id="container">
            <header id="header">
                <span>John Doe</span>
            </header>
                <div id="navbar">
                    <a href="" >Home</a>
                    <a href="">Logout</a>
                    <span>Friday, August 26, 2022</span>
                </div>
                <aside id="sidebar">
                    <nav>
                        <section>
                            <header>Class Development</header>
                            <ul>
                                <li>>Enter grades</li>
                                <li>>Messages</li>
                                <li>>Upload materials</li>
                            </ul>
                        </section>
                        <section>
                            <header>Professional Development</header>
                            <ul>
                                <li>>Teacher's registry</li>
                                <li>>My trainings</li>
                            </ul>
                        </section>
                    </nav>
                </aside>
                <h1 id="my-courses">My Courses</h1>
                <section id="degree">
                            <header id="announcement">Example University - DEGREE PROGRAMS: Semester - 2022-02 </header>
                            <ul id="block">
                                <li>SOFTWARE WORKSHOP II (CS-MSC SFW2) - Block: CS-PREMSC02C1M</li>
                                <li>DATA ANALYSIS AND DESIGN (CS-MSC ANADISDA) - Block: CS-PREMSC02P1T</li>
                            </ul>
                        </section>
                <section id="main-content"></section>
                <footer id="footer">EXAMPLE UNIVERSITY / 123 Main Street, City State Zip - Country Phone: (123) 456-7890</footer>
        </section>
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

html interactive/expandable tree

I've come across this code which generates an HTML tree, but I'm facing an issue where the tree expands every time I refresh the page. What I want to achieve is to have certain branches expanded and others collapsed when the page is opened, depe ...

javascriptjqueryhtmlcss

My React project is unable to import the foundation SCSS file into the App.scss file

After installing zurb-foundation using npm, I attempted to import the .scss file into my App.scss file. Utilizing the "live sass server" for compiling the .scss code into .css code, a .css file was generated but did not display any code despite successfull ...

cssreactjsnpmsasszurb-foundation

Display only the static placeholder in Angular 2 multi-select feature

My experience with angular 4 is fairly new and I've recently delved into using the angular multiselect feature with the npm package available here. I've managed to successfully configure it, as well as capture selected and deselected items/event ...

cssangularnpmresponsive-design

What are some effective ways to ensure the footer stays at the bottom of the page

I managed to successfully position the footer at the bottom of the page, but I noticed that when I resize the screen to fit a phone, especially when there is scrolling on the page, the footer moves up! <footer className="footerContainer"> &l ...

htmlcsssass

Having trouble accessing a CSS file through HTML

Is there a reason why I am facing difficulties accessing main.css from app.html to enable Tailwind CSS? When I try putting it in the style brackets in the .svelte file itself, it throws an error. Can anyone explain why this is happening? <link rel= ...

htmlcsstailwind-csssvelte

What is the best way to consistently update my database with an accurate time stamp every 5 seconds?

My database has a table named user which includes a field called last_seen. I am looking to regularly update this field with the current timestamp every 5 seconds. ...

phpjqueryajaxhtml

Using CSS transform to enhance Flash content

I am currently working on a web application that is contained within an iframe. The iframe has been scaled using -webkit-transform:scale(0.8), which is functioning well. However, I am encountering an issue with the flash audio recorder within the iframe no ...

cssflashtransformscale

Aligning a bootstrap button group at the center of a container

Looking for suggestions on how to center a Bootstrap button group (btn-group) within an element? For instance, consider the following structure: <div id='toolbar'> <div class="btn-group"> <button type="button" class="b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Encountering Empty Output When Trying to Save HTML Form Data to Database

I have recently started learning PHP and web development, and I am attempting to build an HTML form that will submit data to MYSQL. After submitting the form and checking phpMyAdmin, it shows that a row has been submitted, but the row is empty. Previously ...

phphtmlmysql

Retrieving the chosen option from an HTML dropdown menu populated with an array using PHP and transferring it to the database

Apologies for the complicated title, I am new to this and wasn't sure how to explain it concisely. Essentially, I am populating an HTML dropdown list from my MySQL database and trying to save the selected option into a different table. The code snipp ...

phpmysqlhtmldatabase

How to trigger a JavaScript function using a link in CakePHP?

When working with Html, <a href="some_url"> Contact Seller </a> In the realm of Cakephp, <?php echo $this->Html->link('Contact Seller', array('controller'=>'pages', 'action'=>'conta ...

javascriptphphtmlcakephp

How can I center align text after floating ul li elements to the left?

When creating a navigation bar with li elements floated left, the text also floats left. How can I center the text in the navigation bar? I have tried using text-align:center;, but it doesn't center the text on the y-axis. Some suggest using padding t ...

htmlcss

Maintain line breaks in the scanner input within an HTML element

Currently, I am utilizing a Zebra DS9908 scanner to scan a barcode and transfer the data onto an HTML page. However, I am encountering an issue with preserving all input characters. Despite attempting both a <div> and <textarea>, the line feed ...

htmlbarcode-scannerzebra-scanners

Getting the value of dynamically generated buttons when they are clicked in PHP - a simple guide

In my PHP code, I have successfully created dynamic buttons. However, I am facing an issue where I need to retrieve the value of a specific button when it is clicked, and populate all the information in a form. Below is the code snippet for handling the b ...

javascriptphphtmlcss

When scrolling on an IOS mobile device, the .on(click) event is triggered for fixed position elements

Whenever I click on an li element or menu, a function is triggered that moves the nav container to the left by the width of the window. However, on my iPhone, after I click to slide the container off the screen, the event gets triggered repeatedly every ti ...

javascriptjqueryhtmlioscss

Is it possible to create and access a PDF file using file handling in PHP?

In my PHP code, I am utilizing file handling to write and then read a PDF file. However, after successfully creating the PDF file, I encounter an issue where I am unable to open it. When attempting to open the file, Adobe Reader displays an error message s ...

phphtml

Align Bootstrap 4 dropdowns with their parent element

Is there a way to match the width of a bootstrap dropdown menu with its parent input group? <div id="ddl_1" class="input-group"> <input type="text" class="form-control "> <div class="input ...

htmlcsstwitter-bootstrapbootstrap-4

What is causing my page to automatically refresh whenever I click on buttons?

The code snippet below shows the structure of my webpage : HTML : <button class="add-col"><i class="fas fa-columns"> Add a column</i></button> <div class="table-responsive"> <table class="table"> ...

javascriptjqueryhtmlcss

Problem of background and shadow blending in CSS

I'm experimenting with creating an element using a radial gradient effect. My initial approach was to use a white circular container and apply a white box shadow. However, I encountered some issues where the color of the shadow did not match the backg ...

firefoxcssshadow

Tips for inserting an icon alongside a list item in HTML

https://i.sstatic.net/sTWRu.png Can you help me with adding an icon to a list item using Font Awesome or any other method? I want the icon to appear on the right side of the text. I have four sections of text that I want to convert into expandable dropdow ...

htmlcssfont-awesome